1. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Designing Web Sites With HTML - Using Effective Links Instructor: Joseph DiVerdi, Ph.D.

2. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC URLs in Web Pages There are very few stand alone HTML documents Usually part of a Web Site –Collection of documents –Connected by hyperlinks Anchors knit or link pages together into sites An anchor requires a URL, aka Web address An image tag requires a URL There are several kinds of URLs available

3. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Absolute URLs A complete address that specifies the exact location of a Web object without the need for any further explanation or information http://linus.ulltra.com/~diverdi/images/camel.gif Type this into the "location" window of your browser You get an image rendered on your screen Not relative to anything Pretty long-winded way of writing address

4. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC A tilda in a URL http://linus.ulltra.com/~diverdi/images/camel.gif The tilda ~ in the above URL means diverdi is an account on the host linus.ulltra.com The server must use diverdi's "home directory" together with the subsequent path to locate the requested object By definition, diverdi's home directory is /users/diverdi/html so the object's path is /users/diverdi/html/images/camel.gif

5. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Relative URLs An address that specifies the exact location of a Web object in concert with some additional information A relative URL cannot stand on its own camel.gif Type this into the "location" window of your browser You'll get nothing but an error because the browser cannot locate the Web object

6. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Relative URLs A relative URL is "relative" to some other Web object (or document) Some additional information is required to define the address of the other Web object There are several means for providing the necessary additional information

7. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Relative URLs By default, a relative URL is relative to the location of the current document For example, consider the following object: http://linus.ulltra.com/~diverdi/index.html Which contains the following tag: These are equivalent to: <IMG SRC= "http://linus.ulltra.com/~diverdi/images/camel.gif">

8. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Relative URLs By default, a relative URL is relative to the location of the current document Consider the following different document: http://linus.ulltra.com/~diverdi/members/index.html Which contains the following tag: These are equivalent to: <IMG SRC= "http://linus.ulltra.com/~diverdi/members/images/camel. gif">

9. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Multiple Page Project #1 Let's work on a short project Create three files in your own account, named: –first.html –second.html –third.html Put all three in your html directory Confirm correct permissions: 644 or rw-r--r-- File contents are on next slide...

10. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Multiple Page Project #1 Contents of file first.html First Page first page | second page | third page

11. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Multiple Directory Project #2 Let's work on another short project Create a directory in your account –Named images –Located in html directory –With permissions rwx-r-xr-x or 755

12. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Multiple Directory Project #2 Copy the camel file from my account –Use FTPEditor –Verify binary transfer mode –From directory /users/diverdi/camel.gif –Copy to your Windows Desktop –Put into your images directory –With permissions rw--r--r-- or 644 –Note that the extension is all lower case

13. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Multiple Directory Project #2 Add an image tag to each of the three pages first page |

14. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Multiple Directory Project #3 Let's work on another short project Create a directory in your account –Named child –Located in html directory –With permissions rwx-r-xr-x or 755

15. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Multiple Page Project #3 Make a copy of first.html and put it into child Change name of copied file to fourth.html Confirm correct permissions: 644 or rw-r--r-- File contents are on next slide...

16. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Multiple Page Project #3 Contents of first, second, and third files first page | second page | third page | fourth page

17. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Multiple Page Project #3 Contents of fourth file first page | second page | third page | fourth page

18. CSU - DCE 0791 - Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC Targeting New Windows Provide side information without derailing overall information flow For example: Privacy Statement on Home Page –See http://www.xtrsystems.com How it's done: Privacy Policy Don't forget consistency: –"Close this window to resume your work."