180 likes | 360 Views
Designing Web Sites With HTML - Using Effective Links. Instructor: Joseph DiVerdi, Ph.D. 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
E N D
Designing Web Sites With HTML - Using Effective Links Instructor: Joseph DiVerdi, Ph.D.
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
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
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
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
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
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: <IMG SRC="images/camel.gif"> • These are equivalent to: <IMG SRC= "http://linus.ulltra.com/~diverdi/images/camel.gif">
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: <IMG SRC="images/camel.gif"> • These are equivalent to: <IMG SRC= "http://linus.ulltra.com/~diverdi/members/images/camel.gif">
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...
Multiple Page Project #1 • Contents of file first.html <HTML> <HEAD> <TITLE>First Page</TITLE> </HEAD> <BODY> <A HREF="first.html">first page</A> | <A HREF="second.html">second page</A> | <A HREF="third.html">third page</A> </BODY> </HTML>
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
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
Multiple Directory Project #2 • Add an image tag to each of the three pages <BODY> <IMG SRC="image/camel.gif"> <BR> <A HREF="first.html">first page</A> |
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
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...
Multiple Page Project #3 • Contents of first, second, and third files <A HREF="first.html">first page</A> | <A HREF="second.html">second page</A> | <A HREF="third.html">third page</A> | <A HREF="child/fourth.html"> fourth page</A>
Multiple Page Project #3 • Contents of fourth file <A HREF="../first.html">first page</A> | <A HREF="../second.html">second page</A> | <A HREF="../third.html">third page</A> | <A HREF="fourth.html"> fourth page</A>
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: <A HREF="/html/privacy.html" TARGET="_BLANK">Privacy Policy</A> • Don't forget consistency: • "Close this window to resume your work."