1. ET710 HTML Paths: Dot Dot Slash Notation

2. Directory (folder) Hierarchy. We can think of a computer’s file structure as a tree with branches. The trunk of the tree is the root folder. It is the parent of all branches that connect directly to the trunk. These child branches can themselves be parents to other branches and so on and so on.

3. Links to child folders and files A relative link can be used to link together all the files within a website. If your directory structure looks something like the one at the right, a relative link can be written from index.html to any file in the root directory (genealogy_html), or any of the subdirectories in that directory: a href="aboutme.htm" a href="documents/obituaries.html" a href="families/brown/surnames.html” :

4. Links to parent folders and files Dot-Dot-Slash Dot-dot-slash tells the browser to move one level back toward the root directory before looking for the path to the file. To link from obituaries.html to index.html, the browser must move up one level from documents to genealogy_html to find the file. The relative link is written like this: a href="../index.html"

5. Links to parent folders and files Dot-Dot-Slash Dot-dot-slash tells the browser to move one level back toward the root directory before looking for the path to the file. To link from obituaries.html to index.html, the browser must move up one level from documents to genealogy_html to find the file. The relative link is written like this: a href="../index.html"

6. Links to parent folders and files Dot-Dot-Slash You can write a relative link from one subdirectory to another. To link from brown/surnames.html to jones/surnames.html, the browser must move back one level to the families directory to find the jones directory: a href="../jones/surnames.html“.

7. Links to parent folders and files Dot-Dot-Slash Need to move back two directory levels? No problem. From "jones/surnames.html" back through families to your home page in genealogy_html: a href="../../index.html" Just add one dot-dot-slash for every directory level you need to move back, until you find the path to the file.

8. Quiz (for the advanced) Need to make a link from jones/surnames.html to documents/obituaries.html ? Look carefully. You need to go up one level to families, and then up another level to genealogy_html and then down one level to documents/obituaries.com. Write down the path before turning to the last slide which has the answer --->

9. End Need to make a link from jones/surnames.html to documents/obituaries.html ?../../documents/obituaries.html