When organizing a website on a host server one will soon find the root directory filling up with all sorts of files which can get away from us in a hurry and make the site difficult to maintain. For this reason it is best to organize files in the their own folders. Typically these would be,
These folders would be just off the root and the files inside them would be consistent and of the same (or similar) MIME type.
<link href="css/styles.css" rel="stylesheet">
The root directory should be free of clutter and contain only those files that absolutely need to be there, starting with the home page (index.html), the robots file (robots.txt), any search engine verification files, and the spate of other common files such as about.html, contact.html, etc.
One final consideration as images are concerned is whether they are content or window dressing. The latter can be referred to as skin images that might appear on every page and they can be incorporated into the style sheet and tucked away in the CSS folder in their own skin folder and loaded via background image declarations.
The correct tag for images is,
<img src="file.jpg" alt="">
Use of the closing slash is only necessary when serving as XML which we are not doing. When serving as text/html there are no slashes on void elements (self-closing tags).
As for why your image is not loading, we cannot tell given the information provided. Please show your HTML source document, and perhaps a list of the directory contents.