More About HTML - Computer Science and Engineering
advertisement
More About HTML Images and Links 1 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page. 2 Images in HTML Use the <img> 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 3 The <img> Tag <img src="filename" alt="text" /> 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. 4 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 5 Image Example Save on desktop and double click to display file in browser. 6 image_example in Chrome 7 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 8 Image Example on the Web End of Section 9 Creating Links Links allow a user to jump to other places by simply clicking on them. A link can go to another point in the same document or to a completely different page This is the hyper in hypertext! Anywhere in the Internet. Clicking on the link is like typing the URL into the browser’s address box. 10 Links to Other Pages A link to a page on a different site must include the full URL. <a href="http://www.usf.edu/engineering/cse/">Back to CSE Home Page</a> Where to go This is what the user sees as “the link”. Called an absolute URL. 11 File simple_link.html <head> <title>A Simple Page with a Link</title> </head> <body> <b> Click on the link below to go to the Computer Science and Engineering Home page. </b> <br /> &nbsp; <br /> <a href="http://www.usf.edu/engineering/cse/"> Back to CSE Home Page</a> </body> </html> 12 simple_link.html in Chrome 13 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. 14 Link to Page on the Same Site 15 Link to Page on the Same Site End of Presentation 16
