How to link img from a different folder

hi, I’m having a hard time understanding how HTML files work with different folders, how should I save files (images, HTML extra…) ? will love to hear tips and ideas

I’m adding an example of a code. the image I want to link (img tag) is placed in a different folder from the HTML one and it doesn’t open well on the browser. How should I write the name of the image file in the tag?

thanks!!

Let’s say you have a folder structured like this:

HOMEPAGE/
    index.html
    resources/
        myImage.png

You would access it by writing the relative adress to the folder, in this example it would be:

./resources/myImage.png

Similarly, if you would need to go back to a previous folder and into another folder in a structure like this:

HOMEPAGE/
    html/
        index.html
    resources/
        myImage.png

You would access it like so:

./../resources/myImage.png

The single dot specifies that you want to start from the address of the current file and direct to whichever address you add beyond that.
The double dot means that you wish to go “up a level” or move to the folder above in the structure.

I hope this helps :slight_smile:

As for how to structure your project it is a good idea to think of images and CSS as a resource which might be accessed by multiple different HTML files.
Giving your images and CSS a folder for themselves can help you find your files easier.
An example structure could look something like this:

webpage/
    html/
    resources/
         images/
         css/