File and Folder References
Overview
This activity will summarize the important aspects and principles of linking content within anchor, image, and link element attributes. It will also discuss CSS URL parameters. Understanding these principles is an essential component of web technology and usability.
Prepare
Absolute URL References
An absolute URL is a complete URL that includes the protocol, domain, and path. For example,
the following is an absolute URL to the BYU-Idaho about us page where https
is
the protocol, byui.edu
is the domain and about
is the path:
<a href="https://www.byui.edu/about/" target="_blank">BYU-Idaho</a>
target
attribute allows you to specify to open up the
link in a new tab with the _blank
value. Normally that should be left up to the
user, who can open any link in their browser in a new tab, new window, private/incognito
window, etc.Relative References
A relative URL is a reference that is relative to the current page. You have to have knowledge of the file and folder structure of the site in order to write these references correctly. The following examples show how to write a relative URL reference from the index.html page located inside the products folder (as shown in Figure 1):
Image File in the images Folder Reference
We use ../
syntax to let the browser know that we want to go up one
directory and out of the products folder. In this case we are going up to the
assets folder and targeting an image inside of the images folder.
<img src="../assets/images/cele2935.webp">
File in the Same Folder Reference
<a href="product.html">Wiget</a>
File in the Parent Folder Reference
<a href="../products.html">New Products</a>
File in the Sibling Folder Reference
This reference will automatically load the default file in the services directory, which is index.html. We do not need to reference index.html files, just their directories.
<a href="../services">Services</a>
Element on the Same Page
<a href="#section-six">Section Six of the Report</a>
Optional Resources
- Working with Files - MDN
- Anchors - MDN