Up to now you have put all the pages, images, style sheets and other files for a site into one folder.  This has probably been fine but as sites get bigger you need to organise them more.  It is common on a big site to at least give these things their own folder inside the site folder:

You could put the first three all in a folder called media.  You could also have separate folders for any other file types or even some pages.

The actual structure you use is up to you but at least put images and other media into a folder away from the main pages.  Once you have done that the images will stop working on your pages so try it (if you do not have the named page just create one with an image and some other media on it):

  1. go to beginnersite and copy media.html, whatsinside.png, the three meaningless files, cat.ogg, sealion.mp3 and any other media files you used on that page into intermediatesite
  2. inside intermediatesite rename media.html to folders.html
  3. open folders.html in a browser to check that the image, video and sound all work (they should)
  4. create a folder inside intermediatesite called media
  5. move the media files (not folders.html) into the new media folder
  6. try folders.html and the media should not work
  7. open folders.html in your editor and find the first img element
  8. change the src value from whatsinside.png to ./media/whatsinside.png
  9. save the file and try it in a browser and the image should be back
  10. do the same with the other media

The new src value tells the browser to look inside the current folder (the dot) for a sub-folder called media and then gives the file name as before.

If you start using sub-folders now it will become a habit and will save you a lot of confusion later on.  You can also refer to a parent directory using two dots or the root directory using a forward slash: