Linking images to web pages with paths

In this blog, I will talk about how to add images to web pages using a reference path and the syntax for the different types of references you may need to use.

Adding images to a web page can be a little tricky to get the hang of at first, but once you understand the different reference paths, then there is really nothing to it. First, you must understand how the contents of a web site are structured. Weither your website it made up of html docs, css docs, javascript docs, or a mix of all three, it is common to find the content for a website in a hierarchical structure of folderes. So for example, you may have an image named mountain.jpg, inside of a folder named pictures, which is also inside a folder named body. It is imperative that one pays attention to the location of the page they are working on, and the relative location of all elements that wish to be added to the page.

Knowing that, we can start to learn about file paths. Lets say we were working on a homepage inside of a folder named blog and there is also an image inside of that folder that we would like to add to the homepage. Using the img element with source, and alt attributes will allow you to properly link the image. Given that the homepage and the image are in the same locaton, we would use the file path of "name.jpg" in the source attribute to link the image onto the page. Here is an example of what this might look like:

Now, lets say that our homepage is inside of a folder named blog and we have an image that is inside of the body folder which also contains the blog folder. This would mean that the homepage link is "body/blog/index.html" and the image link is "body/name.jpg". We would need to recognize that we are working inside of the blog folder and need to back up one folder to the body folder in order to reference the picture. In this case, the link used in the source element would be "body/image-name.jpg". Here is what this would look like: