1. 1 More About HTML Images and Links

2. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.

3. 33 Images in HTML Use the tag to display an image file in an HTML page..gif.jpg.png The image is a separate file stored within the web site’s virtual directory. Typically in /images directory

4. 44 The Tag filename is path to image file Normally a relative address e.g. "images/xxx.jpg“ alt is text to be displayed if the image file cannot be found or cannot be displayed. Also used by page readers.

5. 55 Image Example Create a folder called images on your desktop. Download file USF_Bull.gif from the class web site into images folder: http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/ 004_HTML_Tables_and_Images/ File USF_Bull.gif In Visual Studio, create a new html file and save on desktop as image_example.html

6. 66 Image Example Save on desktop and double click to display file in browser.

7. 7 image_example in Chrome

8. 88 Deploy image_example to Server Copy both the images folder and file image_example from the desktop to your web directory. View image example on the web

9. 9 Image Example on the Web End of Section

10. 10 Creating Links Links allow a user to jump to other places by simply clicking on them. This is the hyper in hypertext! A link can go to another point in the same document or to a completely different page Anywhere in the Internet. Clicking on the link is like typing the URL into the browser’s address box.

11. 11 A link to a page on a different site must include the full URL. Back to CSE Home Page Called an absolute URL. Links to Other Pages Where to go This is what the user sees as “the link”.

12. 12 A Simple Page with a Link Click on the link below to go to the Computer Science and Engineering Home page. Back to CSE Home Page 12 File simple_link.html

13. 13 simple_link.html in Chrome

14. 14 Links to Other Pages A link to another page on the same site can use a relative URL No “http://” Specification in the link will be appended to the current directory. This is usually the preferred way to write a link. Pages can be moved to a different site, or different directory, without updating the links.

15. 15 Link to Page on the Same Site

16. 16 Link to Page on the Same Site End of Presentation