1. HTML, Third Edition--Illustrated Brief 1 HTML, Third Edition Illustrated Brief Unit D Adding Graphics and Multimedia

2. HTML, Third Edition--Illustrated Brief 2 U n i t O b j e c t i v e s Plan graphics use Insert images Optimize images Specify image size Add a background image Plan graphics use Insert images Optimize images Specify image size Add a background image

3. HTML, Third Edition--Illustrated Brief 3 U n i t O b j e c t i v e s Link images Insert an image map Explore multimedia options Use multimedia Link images Insert an image map Explore multimedia options Use multimedia

4. HTML, Third Edition--Illustrated Brief 4 Planning Graphics Use Use supported file formats Add alternate text Keep file size small Use graphics wisely

5. HTML, Third Edition--Illustrated Brief 5 Planning Graphics Use

6. HTML, Third Edition--Illustrated Brief 6 Planning Graphics Use

7. HTML, Third Edition--Illustrated Brief 7 Clues to Use Changing image file formats  File management utilities can change file names, but do not convert file formats  Image-editing programs are used to convert files to other file types

8. HTML, Third Edition--Illustrated Brief 8 Inserting Images Copy the paradise\images folder paste it into the paradise folder in your site files; open htm_D-1.txt and save it as index.htm in your paradise folder, replacing the existing file Locate the level-one heading at the top of the body section, click directly after, then type Locate the level-one heading at the top of the body section, click directly after, then type Locate the line that starts with Located just outside of, click directly before, type, press [Enter] twice, then save your work

9. HTML, Third Edition--Illustrated Brief 9 Inserting Images Start your Web browser, then open index.htm from your paradise site folder Click the text editor program button on the taskbar, click directly before /> inside the trail_ride1.jpg image tag, type align="right", press [Spacebar], then save your file and reload it in your browser Click the text editor program button on the taskbar, click directly before /> in the logo image tag, type align="middle", press [Spacebar], then save your work Reload the index.htm page in your browser, then rest the pointer over the photo

10. HTML, Third Edition--Illustrated Brief 10 Inserting Images

11. HTML, Third Edition--Illustrated Brief 11 Inserting Images

12. HTML, Third Edition--Illustrated Brief 12 Inserting Images

13. HTML, Third Edition--Illustrated Brief 13 Optimizing Images Use the proper Web image resolution Crop out unnecessary elements Resize the image Use the proper file format Control the color depth

14. HTML, Third Edition--Illustrated Brief 14 Optimizing Images

15. HTML, Third Edition--Illustrated Brief 15 Optimizing Images

16. HTML, Third Edition--Illustrated Brief 16 Optimizing Images

17. HTML, Third Edition--Illustrated Brief 17 Specifying Image Size In your browser, right-click the Paradise Mountain Family Resort logo in the upper-left corner of the page, then click Properties on the shortcut menu Click OK to close the dialog box Click the text editor program button on the taskbar, locate the image tag that references pm_logo1.jpg, click just before the closing /, type width="159" height="156", then press [Spacebar]

18. HTML, Third Edition--Illustrated Brief 18 Specifying Image Size Locate the tag that references the graphic trail_ride1.jpg, click just after the “1” in the file name, press [Backspace], then type 2 Click directly before the closing / in the same tag, then type hspace="15" vspace="5" Press [Spacebar], type width="261" height="400", press [Spacebar], then save your work Click the browser program button in the taskbar, then reload index.htm

19. HTML, Third Edition--Illustrated Brief 19 Specifying Image Size

20. HTML, Third Edition--Illustrated Brief 20 Specifying Image Size

21. HTML, Third Edition--Illustrated Brief 21 Clues to Use Resizing Images  Image width and height properties change the image’s appearance, but not the file size  Image-editing programs reduce the file dimensions as well as the file size

22. HTML, Third Edition--Illustrated Brief 22 Adding a Background Image In a separate instance of your browser, open the file bkg_samples.htm from the samples folder in your paradise\images folder Click each of the background samples to view the actual file, clicking the Back to samples link after viewing each file, then close the bkg_samples.htm browser window Click the text editor program button on the taskbar to return to your page code, click inside the tag, directly before the closing >, press [Spacebar], then type background="images/pm_bkgnd.gif" Save your work, click the browser program button on the taskbar, then reload index.htm

23. HTML, Third Edition--Illustrated Brief 23 Adding a Background Image Click the text editor program button on the taskbar, locate the logo image code, click directly before the closing quotation mark in the image file name, press [Backspace] five times, then type 2.png Click directly before the > in the opening body tag, press [Spacebar], type topmargin="5", then save your work Click the browser program button on the taskbar, then reload index.htm

24. HTML, Third Edition--Illustrated Brief 24 Adding a Background Image

25. HTML, Third Edition--Illustrated Brief 25 Adding a Background Image

26. HTML, Third Edition--Illustrated Brief 26 Linking Images Click the text editor program button on the taskbar, drag to select all of the code from the basefont tag through the navigation bar, then copy the code Open the contact.htm page in your text editor, click directly before, drag to select all of the page code through at the end of the site navigation bar, then paste the copied code Click between the and the Click between the and the Click directly after the /> at the end of the image tag, type, save your work, click the browser program button on the taskbar, open contact.htm in your browser, then move the mouse pointer over the Paradise Mountain graphic logo Click the Paradise Mountain logo

27. HTML, Third Edition--Illustrated Brief 27 Linking Images Click the text editor program button on the taskbar to return to your contact.htm page code, click directly after the closing quotation mark following the align attribute “middle,” press [Spacebar], type border="0", then save your work Click the browser program button on the taskbar, then click the Contact Us link to reload the contact page Return to your contact.htm source code, drag to select all the code from the basefont tag through the of the top navigation bar, then copy the code Open the rates.htm page in your text editor, drag to select from through the closing of the navigation bar paragraph, paste the copied code, then save your work

28. HTML, Third Edition--Illustrated Brief 28 Linking Images

29. HTML, Third Edition--Illustrated Brief 29 Linking Images

30. HTML, Third Edition--Illustrated Brief 30 Linking Images

31. HTML, Third Edition--Illustrated Brief 31 Inserting an Image Map Start another instance of your text editor program, then open the file imagemapParadise.txt from the paradise folder in the location where you store your Data Files Drag to select all the text in the file, copy it to the clipboard, then close the file In your rates.htm file, locate the line that begins with Watch this space!, drag to select the entire paragraph including and, then press [Delete] twice Find the paragraph that ends with or to make reservations., click after, press [Enter] twice, type Click a spot in the map below to view the rooms in one of our 2-bedroom units., press [Enter] twice, paste the image map code from the clipboard, then press [Enter]

32. HTML, Third Edition--Illustrated Brief 32 Inserting an Image Map Save your work, click the browser program button on the taskbar, then open the rates.htm page Move the mouse pointer over the graphic showing the two-bedroom floor plan Click the master bath hot spot on the image map Close the new window and return to the image map Repeat the previous two steps for each of the other hot spots in the image map

33. HTML, Third Edition--Illustrated Brief 33 Inserting an Image Map

34. HTML, Third Edition--Illustrated Brief 34 Inserting an Image Map

35. HTML, Third Edition--Illustrated Brief 35 Exploring Multimedia Options Bandwidth – the data transfer capacity of a Web user’s Internet connection  High-bandwidth Internet connections Improved compression shrinks the size of video and audio files Streaming multimedia technology refers to the ability to configure multimedia files to begin playing before they are fully downloaded

36. HTML, Third Edition--Illustrated Brief 36 Exploring Multimedia Options Animated GIF Macromedia Flash animation Streaming media Embedded audio and video

37. HTML, Third Edition--Illustrated Brief 37 Exploring Multimedia Options

38. HTML, Third Edition--Illustrated Brief 38 Clues to Use Finding free graphics and animation  Numerous Web sites allow you to create your own background graphics, text images, and animations  Use your favorite search engine to search for these files  The Student Online Companion contains links to some of these sites

39. HTML, Third Edition--Illustrated Brief 39 Using Multimedia Copy the media folder from the paradise folder in the place where you store your Data Files to the paradise folder in the place where you save your site files Click the text editor program button on the taskbar to return to your rates.htm source code, click directly before near the bottom of the page, type, press [Enter] twice, then save the file Click the browser program button on the taskbar, then reload your rates.htm file Click the text editor program button on the taskbar to return to your rates.htm source code, locate the height attribute for the media file, click directly after the closing quotation mark following it, press [Spacebar], type autostart="false" align="right“ vspace="10“ hspace="10", then save your work

40. HTML, Third Edition--Illustrated Brief 40 Using Multimedia Click after the closing quotation mark following the “hspace” attribute value, press [Spacebar], type title="Click to play resort features video, or visit the site home page to learn more about the resort.", make sure that your name and today’s date appear in the “Page modified by” paragraph at the bottom of the page, then save your work Click the browser program button on the taskbar, reload the page, then print it Click the Play button on the media player to activate the video clip Close any open files, then transfer your updated files to your remote directory on the server

41. HTML, Third Edition--Illustrated Brief 41 Using Multimedia

42. HTML, Third Edition--Illustrated Brief 42 Using Multimedia

43. HTML, Third Edition--Illustrated Brief 43 U n i t S u m m a r y Plan graphics use Insert images Optimize images Specify image size Add a background image

44. HTML, Third Edition--Illustrated Brief 44 U n i t S u m m a r y Link images Insert an image map Explore multimedia options Use multimedia