Week 1: Demo
Server and Web Paths
The arrangement of assets that we use for our website inside of the file structure of our hard drive is how we should consider the structure of the files once we upload them to our web server. When we consider the locations of our HTML files, CSS files, images, and any other assets, we want to consider the relative path that they are from each other.
Relative Path
The relative path allows us to refer to a file based on where the current HTML or CSS document is located.
- If we want to link to an HTML page that is located in the same directory as our current page, we can do so like this:
<a href="otherpage.html">Other Page</a>
- If we want to load an image into our page, and that image is in the same directory as our HTML page, we can simply refer to it like:
<img src="imagename.jpg">.
- If the image is located in a subdirectory named "images", then we can refer to it using:
<img src="images/imagename.jpg">
- If the image is in the parent directory of the HTML file, we can refer to it using:
<img src="../imagename.jpg">
Absolute Path
An absolute path is how we might link to a webpage completely outside of the server/domain where our HTML file is located. This is simply the process of connecting websites, which must be done with absolute paths. On the web, our absolute paths must begin with either http:// or https:// (the latter being a SSL encrypted connection between client and server).
- If we want to link to Netflix, we would do so with an absolute path from our page:
<a href="http://www.netflix.com">Netflix</a>
- What we want to avoid is ever linking to anything on our local file system. You can tell it's on our local filesystem because it will look like one of the following paths:
<a href="file:///Users/aaron/Documents/acad275/demos/week1/paths.html">
<a href="file:///C:/Documents/acad275/demos/week1/paths.html">
FTP Paths vs. WWW Paths
When you upload your files to the class server, you are uploading them to your user directory on the class server. More specifically, to make them accessable through the class web server via a web browser, the files need to placed inside of your personal "public_html" directory. This is known as the "root directory" for your user account, and will appear at this equivalent URL:
https://webdev.iyaclasses.com/~yourusername/
When you add the "acad275" subfolder inside of your "public_html" folder, it will show up at this location in your web browser:
https://webdev.iyaclasses.com/~yourusername/acad275/
When you add your classpage.html file in your "acad275" subfolder on the server, it will show up at this address in your web browser:
https://webdev.iyaclasses.com/~yourusername/acad275/classpage.html