Directory Structure
Single Folder Structure: If your project HTML files, Images, Style Sheets, JavaScripts etc are in same folder than you just have to apply the filename.
Syntax: <img src="flower.jpg">
Separate Sub-Folder: If your project HTML files, Images, Style Sheets, JavaScripts etc are in sub folder than you must have to apply folder name before specifying the filename.
Syntax: <img src="images/flower.jpg">
Separate Folder: if your project HTML files, images, style sheets, JavaScripts etc are in different/separate folders and it look like the structure shown in the image than use the following syntax to apply image.
<img src="../Folder2/flower.jpg">
'..'(dot dot) is use to move the directory one folder up or to move out from the current folder.
Root folder: If you want to specify root folder, which is the main folder of your project, where all sub-folders and files are located, than use ('/') symbol. Root folder symbol is mainly use when you are making your website online.
<img src="/images/flower.jpg">
File Paths
When you are linking a file on your web page, you can specify the URL or file path in two different ways i.e. relative path and absolute path.
Relative File Path
Relative file path is a way to specify file name in your web page. Relative file path is a short hand to specify a particular folder from the current folder.
Window Relative path: images\flower.jpg
Internet URL Relative path: images/flower.jpg
Absolute File Path
An absolute file path is the full path from the root folder to its file name. Absolute file path is also known as External path.
Windows absolute path: c:\myproject\images\flower.jpg
Internet URL absolute path: https://www.website-name.com/images/flower.jpg
