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

CSU - DCE 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

CSU - DCE 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 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

CSU - DCE Webmaster I HTML & URLs - Fort Collins, CO Copyright © XTR Systems, LLC A tilda in a URL 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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: Which contains the following tag: These are equivalent to: <IMG SRC= "

CSU - DCE 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: Which contains the following tag: These are equivalent to: <IMG SRC= " gif">

CSU - DCE 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...

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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 |

CSU - DCE 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

CSU - DCE 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...

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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 How it's done: Privacy Policy Don't forget consistency: –"Close this window to resume your work."