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

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

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

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

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

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

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

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

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

HTML, Third Edition--Illustrated Brief 10 Inserting Images

HTML, Third Edition--Illustrated Brief 11 Inserting Images

HTML, Third Edition--Illustrated Brief 12 Inserting Images

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

HTML, Third Edition--Illustrated Brief 14 Optimizing Images

HTML, Third Edition--Illustrated Brief 15 Optimizing Images

HTML, Third Edition--Illustrated Brief 16 Optimizing Images

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]

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

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

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

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

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

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

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

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

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

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

HTML, Third Edition--Illustrated Brief 28 Linking Images

HTML, Third Edition--Illustrated Brief 29 Linking Images

HTML, Third Edition--Illustrated Brief 30 Linking Images

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]

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

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

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

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

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

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

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

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

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

HTML, Third Edition--Illustrated Brief 41 Using Multimedia

HTML, Third Edition--Illustrated Brief 42 Using Multimedia

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

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