1. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) CSCE 102 - General Applications Programming 2015-10-3 Benito Mendoza 1 By Benito Mendoza Department of Computer Science & Engineering Links Images Multimedia

2. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) 2015-10-3 Benito Mendoza 2 The power of the WWW lies in the ability to quickly load, via hyperlinks, one document from another at the click of a mouse Links are in-line element External Links: Link to another webpage Internal Links: Link some part of the same document Web Site Structure: Web sites are normally broken in several pages (files) instead of a single file because small files load faster and smaller documents are easier for people to read Internal Links External Links Links Images Multimedia

3. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) Website Structure Any opened HTML document always uses current working path as default location http://www.cse.sc.edu/~mendoza2/csce102/index.html Can link to any document within path without using full location csce102syllabus.html Full path location required when not located on the same server/computer http://www.google.com Internal Links External Links Links Images Multimedia

4. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) 2015-10-3 Benito Mendoza 4 The anchor tag and "href" attribute are used to create a hyperlink. The value of the href attribute for an external link is a valid URL. The link will be rendered in the browser What happens if an exact file is not specified? The web server will send the default document specified in the server setup What happens if the specified URL does nor exist? The web server will return the error Internal Links External Links Links Images Multimedia

5. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) 2015-10-3 Benito Mendoza 5 Links within the same document require a target anchor and a hyperlink anchor The target anchor is of the form: The hyperlink anchor is of the form: The “#” indicates that this is a target internal to the document Internal Links External Links Links Images Multimedia

6. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) 2015-10-3 Benito Mendoza 6 It is possible to link to a document and then target an intermediate location in the page 1.Create the internal target in the page to be linked to 2.Use an external hyperlink with an internal target hyperlink An example: http://www.mysite.com/myfile.html#contents Internal Links External Links Links Images Multimedia Combining External and Internal Links

7. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) GIF – Graphics Interchange Format Lossless compression 256 colors Patented (cannot use free software to create) JPEG – Joint Photographic Experts Group Lossy compression 16 million colors PNG – Portable Network Graphics Patent free solution to GIF 5% -25% more compressible than GIF Links Images Multimedia Types Images in XHTML Creating/Saving Images

8. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) is an empty element Image location can be local or remote Alternative Text is to be displayed in lieu of image. Required in XHTML Types Images in XHTML Creating/Saving Images Links Images Multimedia

9. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) Inline image alignment Use “ align ” attribute (deprecated) align values: left, center, right, top, middle, bottom affects alignment with respect to inline text Use tag with “ align ” attribute Links Images Multimedia Types Images in XHTML Creating/Saving Images

10. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) More Image attributes Width and Height Can be either pixels or percentage 50 and 100 are just example pixel numbers Ordering of attributes not critical Append % to number for percentage Links Images Multimedia Types Images in XHTML Creating/Saving Images

11. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) Images as Links Link an image to a URL Links Images Multimedia Types Images in XHTML Creating/Saving Images

12. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) Links & Images Code Summary Consult page 136 Links Images Multimedia Types Images in XHTML Creating/Saving Images

13. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) Links & Images Code Summary Images may be obtained from graphic art collections either on the web or on a CD- ROM, or you may create them yourself Images may be copied right off a web page by putting the cursor over the image, right clicking, and then selecting “Save Picture as…” (Internet Explorer) or “Save Image as…” (Navigator) MS Paint Links Images Multimedia Types Images in XHTML Creating/Saving Images

14. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) Audio files can be quite large and take a long time to download; video images are huge Streaming the audio or video is a method used to playback the audio/video data before the download completes, but this requires a fast connection with sufficient bandwidth The non-standard tag is used to place audio/video content in a web page Animated GIF files are image files that have multiple images stored inside a single file Animated GIFs are played back by the browser and require only a standard image tag Embedding an audio (or video) file in a Web page with the full console of controls: <embed src="soundeffect.wav" autostart="false" width="280" height="45" align="right" /> Links Images Multimedia

15. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) Images can be configured with multiple hyperlinks using an image as a client-side image map The image “hotspots” (hyperlinks) can be rectangular, circles, or polygons The hotspots are located on the image using coordinates Use the paint program to determine the coordinates on an image; the x,y coordinates can be read at the bottom of the application as one moves the cursor over the image Links Images Multimedia Image Maps

16. CSCE 102 - Chapter 5 (Links, Images, & Multimedia) Creating an Image Map Creating clickable map regions (two rectangles, in this case): Overlaying an image on the clickable map regions to create an image map: <img src="mapimage.gif" alt="Client-side map image" usemap="#myFirstMap" width="250" height="376" /> Links Images Multimedia