Folders and Files

Files and Filenames

html or htm: For the html pages it is more usual to use html than htm as a file extension (it is a throwback to DOS files from the 1980s).
Index.html: It is usual for the home page of a web site to be index.html. Some development environments use other filenames for their home page, e.g., Microsoft likes default.htm/html or home.html. Traditionally a web server is set up to default to index.html if a folder rather than web page is entered into the URL and prevents users getting a file list.
Images: image filenames need to be more descriptive. In a big site if they have names like image001.jpg, image002.jpg this will make maintenance very difficult.
Keep the uppercase and lowercase in your file names consistent e.g., index.html, Gallery.html. This can cause problems when you upload to a Linux server where filenames are case sensitive (e.g., index.html, INDEX.HTML, Index.html, etc., are all considered to be different). Suggest you use CamelCase.
Avoid spaces in your filenames. This can cause issues hosting sites like Neocities.
Files should be organised in folders

Folders and Files

Something that can be confusing when you first start, is to link different FILES together and how they relate to the FOLDERS

On your Hard Drive you organise your files into folders. and the following happens when you refer to one file from another.

1. If the files are in the same folder you do not include a path

so for HTML if kakapo1.html and KakapoInage1.jpg are in the SAME folder, in kapapoNew1.html you use

(this is what you should be using)

2. If the folder containing kakapoNew1.html also contains a folder called "Images" then you use (as you have)

3. If the folder containing kakapoNew1.html also contains a folder called "_This PC" and in that folder is another called Downloads then you use (as you have)

4. One thing to watch is if you use NeoCities they sometimes have

This says go to the top of the folder tree on the current drive (called the root folder) to find the image. This will not work if I copy the website into a folder so needs to be fixed to

Absolute addressing

Errors happen if you have the Drive letter (e.g., "C:/") or file:/// (e.g., file:/// ) in your hyperlinks. This means that your links are tided directly to your storage device so if you copy the site anywhere else of someone accesses your site online (and you have an absolute link) the link will be broken (as they cannot access YOUR storage device).
So remove them and replace them with relative addresses as explained in "Files and Folders" previously.
Absolute addressing can occur when that you used a tool to create the web page (e.g., Dreamweaver, Visual Studio, etc.) and you inserted the links/images before you saved the page.
In Neocities. E.g., <a href="https://mysite.neocities.org">Home</a> should be <a href="index.html"> Home</a>

Relative addressing

A common error occurs when your code contains a relative address that sends the link to the root of the drive (has "/" at the start of the link)
1. When this is copied to another storage device, your website is usually put into a folder so all the links will try to go to the top (root) folder.
2. This can break your code. So to fix this
  1. CSS file: href="/style.css" should be href="/style.css")
  2. links: <a href="/about.html">About </a> should be <a href="about.html">About </a>)
  3. images: <img src ="/mypic.jpg"> should be <img src="mypic.jpg">
  4. In a folder: <img src ="/media/mypic.jpg"> should be <img src="media/mypic.jpg">

Other tips

Also, make sure the filename in the img src is EXACTLY the same as on the disk. For example, if you have "Kakapo1.jpg", and in your HTML code you have "Kakapo 1.JPG" (space included), or "KAKAPO1.JPG", or "Kakapo1.JPG" on some computers these are NOT the same and will cause an icon to show.
It is best not to have spaces in Filenames. Programmers commonly use CamelCase to separate words. So rather than “kakapo image 1.jpg” use “KakapoImage1.jpg” (Use a capital letter for the start of each word and skip the spaces).