1. …when you own all the files…you can link to them directly
Relative Links
Means you specify where the link leads relative to where you currently are (what page?)

2. If pages are in the same directory (file folder)
Link ON page1.html to page2.html
my-site
page1.html
page2.html
<a href=“page2.html”>Page 2</a>

3. If page is one folder deeper
Link ON page1.html to page2.html
my-site
fold
page1.html
page2.html
<a href=“fold/page2.html”>Page 2</a>

4. If page is two folders deeper
Link ON page1.html to page2.html
..pattern continues if even deeper folders
my-site
fold
page1.html
inner
page2.html
<a href=“fold/inner/page2.html”>Page 2</a>

5. If page is outside current folder
Link ON page1.html to page2.html
my-site
fold1
page1.html
page2.html
<a href=“../page2.html”>Page 2</a>

6. If page is in Different folder
Link ON page1.html to page2.html
my-site
fold1
fold2
page1.html
page2.html
<a href=“../fold2/page2.html”>Page 2</a>

7. Note .. Means go back a directory If I need to exit out of two folders
<a href=“../../page2.html
my-site
fold1
page2.html
fold2
page1.html

8. Pattern holds To escape back out of folders
Need a ../ for each folder you’re escaping

9. Terms to use when folders are relative to each other
A is the parent directory
B is the child directory A B

10. Naming Conventions All this can be confusing enough
Name files appropriately:
NO SPACES! – smoosh words or use hyphens
Name folders (directories) after what they contain
Name images based on what they show
Name HTML files based on what they contain
Main HTML file for a site is ALWAYS index.html