Reference Types

Video Summary

In order to put a link or image on a page, you will need to add the location, or "address" of that image. There are two ways to do this:

Relative Addresses

Up until now, we have been telling you to keep all of your files in the same folder so that they can see each other and work properly. This is actually called relative addressing - the files are connecting based on their position relative to each other in the folder. For example, when you added the link to "default.css", the browser looked for a file with that name within the same folder and used it.

In order to keep files in different folders, you would have to add "pathing" to all of your links and images. This is generally more work, which is why we suggest not doing it, but if you wanted to you could place all of your pictures in a folder named "images", you would just need to add "images/" in front of the address to every picture on your website.

You will generally use relative addresses when you are creating your own pages. Since you need to match the name exactly later, it is highly recommended that you keep file and image names as simple as possible.

Absolute Addresses

Absolute addressing is essentially pointing to a place on the internet and saying "get the information from there." As long as the place that is storing your link or image doesn't change, and is on the internet in the first place, this works fine.

You need to be careful not to confuse relative and absolute addressing when you are making your assignment. If you include pathing to local drives in your address, such as "C://desktop/username/image.png", this will work offline because your computer can find it, but the moment you upload it to Replit everything will break because Replit can not access your local files.

You would use an absolute reference if you were adding a link to an external webpage such as Google, because there is no way you could save their whole page to your Replit as a relative address.