An absolute address gives the entire http path name, such as http://www.widomaker.com, or http://yorkcountyschools.org. This is not always necessary though it will work. It is also possible to use "relative addresses". If the server has already located your home page, it can find the other pages or graphics by simply giving the location of those files relative to the home page or home directory, or whatever directory you're in.
ALL FILE ARE IN THE SAME DIRECTORY!
|
To link these files to the "index.html" file, I do not have to give the entire path name. |
|
|
Files |
Code |
|
index.html image1.gif image2.gif myschool.html image3.jpg Jones.html |
<img src="image1.gif"> <img src="image2.gif"> <a href="myschool.html"> <img src="image3.jpg"> <a href="Jones.html"> |
EVERYTHING IS IN FOLDERS AND THE FOLDERS ARE AT THE SAME LEVEL (ROOT)
|
Notice that in this example there are 3 separate folders. Even the index.html is in a folder. |
|
|
Files |
Code |
|
HOME index.html image1.gif SCHOOL myschool.html other.gif CLASS Jones.html image3.jpg |
To link index.html to myschool.html:
**To call the image1.gif file from index.html: To link index.html to Jones.html: To link lastpage.html to index.html: |
NOTE: The dot dot slash (../) means to go outside the folder you're in and to go into a different folder to find the file. (The two dots mean we're backing up one level (folder). The slash means we're leaving the current level (folder) and going into another level (folder).
**Notice that in the above example, the index.html file did not have to put the ../ to call the image1.gif file because it's on the same level, in the same directory. (folder) If you had tried to link the index.html to "other.gif" which is in the SCHOOL folder, you would have had to use : " ../SCHOOL/other.gif"
INDEX IS AT THE ROOT LEVEL BUT
EVERYTHING ELSE IS IN A FOLDER
|
Files |
Code |
|
index.html HOME image2.gif SCHOOL myschool.html other.gif CLASS Jones.html image3.jpg |
To link from index.html to image2.gif: To link index.html to myschool.html: To link index.html to Jones.html: To link Jones back to index.html: |
In this example, I did not have to use the ../ to link from index.html to a file. This is because index. html is not inside a separate folder and only has to name the folder to which its linking.
However, I did have to use the ../ when linking from Jones.html back to index.html. That's because I had to get out of the CLASS folder first.
WHAT ABOUT A FOLDER INSIDE A FOLDER…
|
Files |
Code |
|
index.html HOME image2.gif SCHOOL myschool.html other.gif CLASS JONES Jones.html image3.jpg |
To link from index.html to Jones.html: To get from Jones.html to myschool.html: To link from Jones.html back to index.html: |
Notice the ../../ was used to go from Jones.html back to index.html. That's because we had to go up two levels to get to index.html. If we had linked from myschool.html to index.html, we would have used only one ../
To get from Jones.html to myschool.html, we had to back out of JONES and CLASS and then go into SCHOOL to get to myschool.html.