1. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2016 by Pearson Education, Inc. All rights reserved.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

2. Chapter 8 Introduction to HTML
Part 5
File Paths
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

3. In this lecture, you will learn:
Types of file paths
How to construct a document-relative file path for writing HTML documents
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

4. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
File Path
Location of a file on a computer
Like an address to a house
Start with the outermost folder to the inner folders
Folder names are separated by a slash (/)
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

5. Types of File Paths for Web Documents
Absolute paths
Document-relative paths
Site root-relative paths
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

6. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Absolute Paths
Example:
Full URL to a Web page or any media
Used for linking to files that are on a different Web site
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

7. Document-Relative Paths
Example: products/coffee/french-roast.html
Most commonly used in Web authoring
The path is relative to the page that french-roast.html is being requested
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

8. Site Root-Relative Paths
Example: /products/coffee/french-roast.html
Starts with a slash (/), meaning starting from the root folder of the site
A root folder is the outermost folder of the site
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

9. Example Folder Structure of a Site
Root folder
Root folder
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

10. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Navigating Folders
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

11. Opening the "products" folder
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

12. Opening the "coffee" folder that is inside "products"
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

13. Now from the "coffee" folder let's navigate back up
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

14. Going Up One Level to "products"
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

15. Going Up One More Level to "my-site"
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

16. To Construct a Document-Relative Path
Need to know:
Target page: The page being linked to
Source page: The page containing the link or the page being linked from
Think of the document-relative path as the direction to navigate from the source page to the target page.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

17. To Construct a Document-Relative Path
Rule #1: To link to another file that is in the same folder as the current document, simply use the filename as the path.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

18. To Construct a Document-Relative Path
Example: To add a link in mocha-java.html (source page) to link to french-roast.html (target page), the file path is simply the filename french-roast.html
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

19. To Construct a Document-Relative Path
Rule #2: To link to a file (target page) that is in a subfolder of the current document’s (source page's) folder, use the subfolder name followed by a forward slash (/) and then the filename. Each forward slash (/) represents moving down one level in the folder.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

20. To Construct a Document-Relative Path
Example: To add a link in index.html (in my-site folder) to link to french-roast.html (target page), the relative path is: products/coffee/french-roast.html
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

21. To Construct a Document-Relative Path
Rule #3: To link to a file that is outside of the current document’s folder, start the path with ../ followed by the folder name, a forward slash (/), and then the filename. Multiple ../ can be appended for going up multiple levels in the folder hierarchy ../ means going up one level in the folder hierarchy
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

22. To Construct a Document-Relative Path
Example: To add a link in french-roast.html (source page) to link to index.html (in my-site folder), the relative path is: ../../index.html
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

23. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Questions
Note to instructor:
Depending on your preference, you may want to go over the review questions at the end of this lecture as an instant review or at the beginning of next lecture to refresh students' memory of this lecture.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

24. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
For the site example shown here, to add a link on the page french-roast.html (source page) to link to the Web page mocha-java.html (target page), the document-relative file path is ___ .
mocha-java.html
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

25. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
For the site example shown here, to embed the image logo.png (target page) on the homepage index.html (in the my-site folder), the document-relative file path is ___ .
images/logo.jpg
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

26. © 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Review Question
For the site example shown here, to embed the image logo.png (target page) on the Web page french-roast.html, the document-relative file path is ___ .
../../images/logo.jpg
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.