Links or… How to Get There From Here!

1. Links or…How to Get There From Here! John Sklar How The Web Works

2. The Real Magic • The real magic of the Web is that it does it all. • Think of it as an internet Swiss Army Knife.

3. It Is All About Protocols • The internet has rules, file formats and browsers know them all. • That’s why you can use the web to download files, upload files. • And do almost any task you want. • This is done with the basic URL

4. Path… Server Name Protocol (Hypertext Transfer Protocol) Actual File Name* *If omitted then the browser looks for index.htm or index.html if not found we get a file list Uniform Resource Locator http://faculty.stritch.edu/jmsklar/533/index.htm

5. Path… Server Name Protocol (Hypertext Transfer Protocol) Actual File Name* *If omitted then the browser looks for a file list… Uniform Resource Locator ftp://microsoft.com/pub/mouse/driver.zip

6. An Email address Protocol (Opens an email program on the local computer) Uniform Resource Locator mailto:someone@someplace.edu

7. Vertical bar Drive Letter Path and file name* Protocol (finds a file on the local hard drive.) *Elizabeth Castro says: for mac use file:///hardisk/path/filename. No vertical bar required. Often works for Windows too. Uniform Resource Locator file:///c|/path/home.htm

8. Absolute URL Reference http://faculty.stritch.edu/jmsklar/533/index.htm Absolute URL’s contain the entire URL. They are the compete address. If the file or page you are after is on another server you must use and absolute URL. An absolute URL will work from any location.

9. Relative URL Reference • It is wasteful to use absolute URL’s when the file you are after is in the same folder. It would be like sending a package to your neighbor by Fedex. Example: Two files in the same folder, one called fileone.htm and the other index.htm. To call fileone.htm from index: <a href=“fileone.htm”>Go to fileone</a>

10. Relative URL Reference Example: Once in fileone.htm, to go back to index we simply need: <a href=“index.htm”>Back to the first file!</a>

11. More on Relative URL’s • In 533 there is an index.htm • To call the file index.htm in the htmlrat folder, we use this code: <a href=“htmlrat”> or <a href=“htmlrat/”> This calls the index.htm file in the folder htmlrat.

12. More on Relative URL’s If we want to go back to the 533/index.htm file from the htmlrat/index.htm file we need a different approach: <a href=../index.htm> or <a href=“../”>

13. More on Relative URL’s If we want to call the play.htm file in the music folder, from the index.htm in the 533 folder, we use this code <a href=“cssdemo/music/play.htm”>

14. More on Relative URL’s To return to the index.htm in the 533 folder we use the code: <a href=“../../”> Or <a href=“../../index.htm”>

15. Organize in Folders • If you organize your web pages in folders the navigation is easy and takes much less coding • The great advantage is that the web pages are portable, wherever they are on the server they should work if they are placed in the same proximity. • Of course all your folders on stritch are in the student/yourloginname folder

16. Links: Within the same Document We have used links to go from place to place and from file to file but we can jump within a file. Within the file place this code: <a name=“ending”>Final Thoughts</a> Or <a id =“ending”>Final Thoughts</a> Somewhere else in the document have a line like this: <a href-”#ending”>See my final thoughts</a>

17. Links: To an Anchor in Another Document: If you know the anchor you can jump to a specific place in another file: Within the file place this code in the file philosophy.htm: <a name=“ending”>Final Thoughts</a> Or <a id =“ending”>Final Thoughts</a> Then in another document you can get there with this: <a href-”philosophy.html#ending”>See my final thoughts</a>