HTML Exercise 20 Linking Pictures To Other Documents Or Web Sites

HTML Exercise 20 Linking Pictures To Other Documents Or Web Sites Turning pictures into hyperlinks is nearly the same as what you learned in Exercises 4 and 5. If a picture is essential to a Web page, you should insert it. Otherwise, give the reader the choice of looking at a thumbnail of the picture and clicking the thumbnail to see the full picture. Also, you may want to use a thumbnail image if the full size picture has a large file size and takes a while to download. Whenever you use a JPEG picture, Paint Shop Pro allows you to compress it using the JPEG Saver. In this exercise, you will have to choose the best level of compression and write down the final value. Be courteous to your readers; they may not have a fast Internet connection. Another way to be courteous to your readers is to use the ALT subcommand. Some people with older browsers may not be able to see pictures, or they may have the picture option turned off. Also, many people with limited vision have Web readers that read whatever ALT message you type. Finally, add the BORDER= n subcommand. The number stands for pixels. If the number is 0, the blue or purple hyperlink box that will appear around the picture is removed. <A HREF= filename ><IMG SRC= filename ALT= screen tip BORDER= 0 ></A> The URL or the HTML document that you want to jump to. Inserts the picture subcommand Changing the Pictures Document 1. Double-click your HTML folder to open it. 2. Double-click the pictures.html file to open it. 3. Right-click a blank spot on the page and select View Source. 4. Change the Revision Date in the footer of the page to today s date. 5. Change the exercise number to 20. Revised--Date HTML Exercise 20 6. Type the HTML code below the heading9.gif. <IMG SRC="heading9.gif" <H2>Thumbnail Images in HTML Documents are Way Cool!</H2> <BLOCKQUOTE> Using thumbnail images in HTML documents is really easy and fun, not to mention a kindness to your readers. </BLOCKQUOTE> Exercise 20 Page 1

7. Click File on the Menu bar and select Save. 8. Click the Internet Explorer button on the Taskbar. 9. Click the Refresh button. 10. You should now see the Web page with a heading and a paragraph. Figure 1 Browsing Some Picture Files 11. Click Start, point to Programs, point to the Jasc Software folder, and select Paint Shop Pro 7. 12. Maximize the Paint Shop Pro window. 13. Press Ctrl+B to browse a folder. 14. In the left pane, click the + sign to the left of Network Neighborhood. 15. Click the + sign to the left of Students 200_ folder. 16. Click the + sign to the left of Advanced Computers folder. 17. Click the Class Photos folder to open it. 18. You will see a number of class photos. The photos are JPEGs. 19. Double-click any picture that you want to use. 20. The picture will open in Paint Shop Pro. Resizing an Image The new digital cameras take large pictures, too large for the average monitor. Resizing will mean smaller file sizes, faster download times, and no horizontal scrolling. 21. Press Shift+S. 22. The Resize image dialog box opens. 23. Under Pixel Size, change the Width to 800. 24. The Height will automatically change. 25. Click OK. Using the Effects Browser Use the Filter Browser to try out filter effects before applying them to your image. When you select a filter from the Filter Browser, Paint Shop Pro opens that filter. To apply a filter to a selection, create the selection before choosing the filter. 26. Click Effects on the Menu bar and select Effects Browser. 27. The Effects Browser dialog box opens. Exercise 20 Page 2

28. Under Effect name, preview an effect that you like. 29. Click OK when you find a filter effect that you like. 30. Another dialog box will open with the name of the effect that you have chosen. 31. Experiment with the settings to get just the effect you want. 32. Click OK. Table 1: Filters are a lot of fun Saving a Compressed JPEG The JPEG Optimizer is similar to the GIF Optimizer. It compresses the file to make the file size smaller. Exercise 20 Page 3

33. Click File on the Menu bar, point to Export, and select JPEG Optimizer. 34. The JPEG Optimizer dialog box opens. 35. This dialog box allows you to compress your picture so that it will download faster. 36. Click the Quality tab. 37. Notice the two preview windows. This shows your image before and after compression and the file size. 38. Between the two preview windows are three Zoom buttons. - zooms out - zooms in - moves around the image 39. Click the button and move to a part of the picture that has a lot of detail or color. 40. Zoom in or out if it helps. 41. Set compression value to any number from 1-99. Figure 2:The compressed JPEG is much smaller in file size. The pictures are about equal in quality. 42. The higher the compression value, the smaller the file size, but the lower the quality of the image. 43. Set the compression to the highest number that looks as good as the original. 44. Click the Format tab. 45. Select Standard. 46. Click OK. 47. The Save As dialog box opens. 48. Save in your HTML folder. 49. In the File name text box type filter1. Exercise 20 Page 4

50. Click Save or press Enter. Making a Thumbnail Image 51. Press Shift+S. 52. The Resize image dialog box opens. 53. Under Pixel Size, change the Width to 200. 54. The Height will automatically change. 55. Click OK. 56. Click File on the Menu bar, point to Export, and select JPEG Optimizer. 57. The JPEG Optimizer dialog box opens. 58. This dialog box allows you to compress your picture so that it will download faster. 59. Click the Quality tab. 60. Set compression value to the highest number that looks as good as the original. 61. Click the Format tab. 62. Select Standard. 63. Click OK. 64. The Save As dialog box opens. 65. Save in your HTML folder. 66. In the File name text box type filter1tmb. 67. Click Save or press Enter. 68. Close the resized picture, but do not save it. Figure 3: The thumbnails will have a consistent size. Inserting, Aligning, and Linking a Picture into a Document The thumbnail picture will be inserted into the document. You will write a paragraph about what effect you used and about the amount of compression. 69. Click the Notepad button on the Taskbar. 70. Type the HTML code before the closing </BLOCKQUOTE> tag. <BLOCKQUOTE> Using thumbnail images in HTML documents is really easy and fun, not to mention a kindness to your readers. <A HREF="filter1.jpg"><IMG SRC="filter1tmb.jpg" ALT="Twirl filter." ALIGN="left" HSPACE="10" BORDER="0"></A> I used the Twirl filter. The compression value was 20. </BLOCKQUOTE> Type your own information here. Exercise 20 Page 5

71. The hyperlink is to the filter1.jpg. 72. Instead of a text link, you are inserting a picture. 73. The ALT subcommand will be visible when you move the mouse over the picture. 74. The HSPACE subcommand will move the text away from the picture. 75. No hyperlink border will surround the picture. 76. Click File on the Menu bar and select Save. 77. Click the Internet Explorer button on the Taskbar. 78. Click the Refresh button. 79. You should now see the thumbnail picture surrounded by a blue hyperlink border. The text is wrapping around the side of the picture. 80. Click the thumbnail to test the hyperlink. 81. Click the Back button on the toolbar. Figure 4 Using the Effects Filter Again 82. Click the Paint Shop Pro button on the Taskbar. 83. Press Ctrl+B to browse the Class Photos folder on Zeus. 84. Double-click another picture you like to open it in Paint Shop Pro. 85. Press Shift+S. 86. The Resize image dialog box opens. 87. Under Pixel Size, change the Width to 800. 88. The Height will automatically change. 89. Click OK. 90. Click Image on the Menu bar and select Effect Browser. Exercise 20 Page 6

91. The Effect Browser dialog box opens. 92. Under Effect name, preview another effect that you like. 93. Click OK. 94. Another dialog box will open with the name of the effect that you have chosen. 95. Experiment with the settings to get just the effect you want. 96. Click OK. 97. Click File on the Menu bar, point to Export, and select JPEG Optimizer. 98. Click the button and move to a part of the picture that has a lot of detail or color. 99. Zoom in or out if it helps. 100. Set compression value to the highest number that looks as good as the original. 101. Click the Format tab. 102. Select Standard. 103. Click OK. 104. The Save As dialog box opens. 105. Save in your HTML folder. 106. In the File name text box type filter2. 107. Click Save or press Enter. Making a Thumbnail Image 108. Press Shift+S. 109. The Resize image dialog box opens. 110. Under Pixel Size, change the Width to 200. 111. The Height will automatically change. 112. Click OK. 113. Click File on the Menu bar, point to Export, and select JPEG File. 114. The JPEG Saver dialog box opens. 115. This dialog box allows you to compress your picture so that it will download faster. 116. Click the Quality tab. 117. Click the button and move to a part of the picture that has a lot of detail or color. 118. Zoom in or out if it helps. 119. Set compression value to the highest number that looks as good as the original. 120. Click the Format tab. 121. Select Standard. 122. Click OK. Exercise 20 Page 7

123. The Save As dialog box opens. 124. Save in your HTML folder. 125. In the File name text box type filter2tmb. 126. Click Save or press Enter. 127. Close the resized picture, but do not save it. Inserting, Aligning, and Linking a Picture into a Document The thumbnail picture will be inserted into the document. You will write a paragraph about what effect you used and about the amount of compression. 128. Click the Notepad button on the Taskbar. 129. Type the HTML code before the closing </BLOCKQUOTE> tag. <A HREF="filter2.jpg"><IMG SRC="filter2tmb.jpg" ALT="Tiles filter." ALIGN="left" HSPACE="10" BORDER="0"></A> I used the Tiles filter. The compression value was 30. </BLOCKQUOTE> 130. Click File on the Menu bar and select Save. 131. Click the Internet Explorer button on the Taskbar. 132. Click the Refresh button. 133. You should now see the thumbnail picture surrounded by a blue hyperlink border. The text is wrapping around the side of the picture. 134. Click the thumbnail to test the hyperlink. 135. Click the Back button on the toolbar. Figure 5 Type your own information here. Exercise 20 Page 8

On Your Own 136. Select two more photos from the Class Photos folder. 137. Resize the pictures to 800 pixels in width. 138. Use the Effects Browser to create two more effects that are different. 139. Export the pictures to the JPEG Optimizer. 140. Set the correct compression value. 141. Resize your pictures to make thumbnails. 142. Make the Width of each thumbnail 200 pixels. 143. Save you two compressed pictures and two thumbnails to your HTML folder. 144. Name the files: 145. filter3 146. filter3tmb 147. filter4 148. filter4tmb 149. Insert the thumbnails into your pictures.html document and link them to the large pictures. 150. Don t forget the ALT subcommand. 151. When you are finished, test to see that all of your hyperlinks work. Uploading Your Documents 152. In Internet Explorer, type www.geocities.com in the Address bar text box and press Enter. 153. Type your user name and password. 154. Press Enter or click the Sign in button. 155. Under Advanced Toolbox, click. Upload pictures.html Upload filter1.jpg, filter2.jpg, filter3.jpg, and filter4.jpg Upload filter1tmb.jpg, filter2tmb.jpg, filter3tmb.jpg, and filter4tmb.jpg 156. Click the button to copy the files to the Geocities server. 157. A new page will open telling you that you have successfully uploaded the files. 158. Click the hyperlink to your home page. 159. Click. Printing the Web Page 160. Before printing, click View on the Menu bar, point to Text Size, and select Medium. 161. Press Ctrl+P. Exercise 20 Page 9

162. The Print dialog box opens. 163. Change the Name to Ireland. 164. Change the Number of copies to 2. 165. Click OK. 166. Your teacher will go online to check your Web page and mark the grade on the printed copy. 167. Close all windows. Figure 6: Now everyone can see exactly how you made each design. Exercise 20 Page 10