Designing Web Sites With HTML - Using Effective Links

CSU - DCE 0791 - Webmaster IHTML & URLs - Fort Collins, CO

Copyright © XTR Systems, LLC

Designing Web SitesWith 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...




• 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




• 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




• Add an image tag to each of the three pages

<BODY>

<IMG SRC="image/camel.gif">

<BR>

<A HREF="first.html">first page</A> |




• 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




• 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...




• 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>




• 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."

Documents

Designing Web Sites With HTML - Using Effective Links