1 / 18

Designing Web Sites With HTML - Using Effective Links

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

dominique-dudley
Download Presentation

Designing Web Sites With HTML - Using Effective Links

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing Web Sites With HTML - Using Effective Links Instructor: Joseph DiVerdi, Ph.D.

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

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

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

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

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

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

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

More Related