1. Hyperlinks Types of Links Link to the places in the same page Link to pages within the same site Link to the e-mail system –Caution: Will not work without a e-mail set up Link to other sites –Caution: Check often for broken links Mouse clicks to change what the browser displays

2. Hyperlinks in the same page Step 1 Define point to link to Step 2 Create hyperlink link This paragraph has a click here Put lots of content here This will display when the hyperlink is clicked Lots more content How? We use the anchor tag !

3. Hyperlinks within the same Site Link to pages in the same site –Example: link to a pages in a child folder Go to sub folder –Example: link to a page in the parent folder Go to parent folder –Example: link inside a page in the same folder ) Notes: –Page is a folder within the one that holds the HTML file –The characters ‘..’ Refers to the parent folder –site.htm must have a hyperlink using an id="mars" attribute

4. Other Hyperlinks Link to the e-mail system Contact Dan Harvey –Caution: Requires e-mail links to the browser Link to other sites –Example: Mars In link http://solarviews.com/eng/mars.htmhttp://solarviews.com#inPage –Caution: External links can change; check often –Caution: Linking to within external pages is dangerous Mouse clicks to change what the browser displays

5. Displaying Pictures Where do we get Pictures from –Digital photographs –Scanning drawings into the computer –Find clip art –Right click and download internet images –Make your own (Adobe, Photo Shop, Corel) Which image formats should we use –See next slide

6. Comparison of Image Formats Featuregifpngjpg LosslessYes No CopyrightedYesNo AnimationYesNo TransparencyYes No Size on DiskLarge Small PixResizer is a freeware that allows you to change formats

7. Displaying Pictures The tag Display a picture on the same site Display a picture on another site http://www.nasa.gov/images/earth2.jpg Click on an image to link <img src="http://www.grafiti.com/~harvey/anieifel.gif"www.frenchtravel.comhttp://www.grafiti.com/~harvey/anieifel.gif alt="grafiti"/>

8. Other Image Tag Attributes alt = "Coliseum" –Display if browser cannot display the image –Displays if the mouse moves over the image –Required for XHTML compliance align to "left", "right", "top", "bottom", or "middle“ –Defines position relative to the surrounding text border="0" or border="10" –Eliminate or create a border around an image width= "50" height="50“ –Resize the image –Note: can distort the display hspace="10" vspace="10" –create white space around the image

9. Image Examples Basic img tag (Caution: link externally with care or you can get broken links) http://www.nasa.gov/images/earth2.jpg Align attributes (useful for small images) align="top" – line of text at the top align="middle" – line of text in the middle align= " bottom " – line of text at the bottom Scaling (Caution: size changes can cause distortion and the whole thing loads anyway) height="50" width="50 " – scale the sizeStyle sheet positioning The alt attribute is required for XHTML compliance. The text displays when users mouse over and if the image is not found Caution: Lots of images make for cluttered pages and slow downloads

10. The Image Map … Define click coordinates hyperlinks in images Tie image to image map – Define the image map – Create click point(s) – –Other shapes are circle (x,y,r) or poly (x1,y1,…,xk,yk). –x1,y1,x2,y2 are the pixel coordinates (ex: 0,66,26,227) –Coordinate 0,0,0,0 is the top left Note: This is one example where a DreamWeaver can help Note: The alt attribute is required for XHTML compliance

11. Image Map Example <area shape="rect" coords="48,46,204,153" href=" question.html" alt="question"/> <area shape="rect" coords="321,154,468,26" href="pinatubo.htm/" alt="pinatubo" /> <area shape="rect" coords="172,155,318,274" href="strombi.htm" alt = strombi" /> <area shape="rect" coords="36,155,168,276"href="volcwatch.htm" alt="volcano watch" /> <area shape="rect" coords="205,3,343,123" href="santamaria.htm” alt="santamaria" /> Note: The image has no border

12. The Target Attribute Designates if linked web page should appear in a separate window Works with the and tags target="_blank" –Display linked page in a separate blank window target="_top" –Fill entire browser window (applies to frames) target="_self" –Display linked page in the same browser window target="_parent" –Display linked page in frame occupied by previous (parent) link target="name of window" –Display linked page in new window with the specified name.

13. Sound (Formats and Example) Wav: Uncompressed and large, universal Mp3: Good compression, not on all platforms Aif: Apple, some compression Note: Check out Appendix B in the book for full tag description

14. Movies (Formats and Example) Mpeg (Motion Pictures Expert Group) –Best compression, Proprietary, Not on all platforms Avi (Audio Video Interleave by Microsoft) –Hi compression possible, some files don’t use it Mov (developed by apple) –Largest user base with cross platform support <embed src="sample.mov" width="160" height="144" autoplay= "false" controller="true" loop="false" pluginspage="http://www.apple.com/quicktime/download/">

15. Some Review Questions Browsers can play audio using a standard hyperlink. Why is it better to use the object tag? Why is it a good idea to include both an and tag when linking to multimedia audio and video? What is an image map? How do you link an image to an image map? How do you set up an image map? What are the uses and values of the target attribute? What tags make use of the target attribute? How would you create an image in a web-page with text rolling around both the left and right sides? What are the primary image formats? What are the advantages and disadvantages of each? Why is it dangerous to link to external images? How do you hyperlink to the middle of a page? How do you create an e-mail hyperlink? What attributes are required for the img and area tags.