05. File Structure

Introduction

This lesson covers the basic file structure of a website, which is necessary to understand before proceeding to the next lesson.

Learning Outcomes

By the end of this lesson, you should be able to:

  • Identify the root directory of your webserver
  • Explain why naming a file index.html behaves differently than others.
  • Create a website on Neocities or locally.

Homepage

The first thing to understand is that a website is basically just a folder on a computer somewhere.

Generally speaking, website’s homepage, or the main page we see when to when we visit a site, lives in the root directory’s index.html file.

When you create a site on Neocities, your root directory is the first one that opens up.

The label in the gumby-colored bar at the top of the file manager says Home – so that’s your root!

In your root folder, the file named index.html is your homepage. Whatever you put between the <body> tags in this file will become your homepage.

This is why going to https://sadgrl.online/ and https://sadgrl.online/index.html are exactly the same page! Web browsers just know to ignore the ‘index.html’ part so it doesn’t show up in the URL bar.

If your homepage file is titled anything other than index.html, then that will show up in the URL bar.

Subpages

The index.html inside of any folder is always the ‘main page’. That’s why I like to refer to the other pages as subpages.

In the screenshot above, the file not_found.html is a subpage. It can only be visited by visiting mywebsite.com/not_found.html specifically (actually Neocities redirects any page that doesn’t exist to this page, but normally it would function like the above).

For example, this page of my website is just a file called webgarden.html that exists in my root directory.

Subdirectories

Subdirectories are just folders inside of your root folder.

My blog, for instance, is at https://sadgrl.online/blog/ – the URL tells me that my blog is inside of a folder called blog – and what you see when you visit that hyperlink is the index.html page in that folder.

If you wanted to make a section of your site, called ‘pets’, it might look like yoursite.com/pets/

Note that this will only work if you have an index.html file inside of a folder called pets, which is located in your root directory.

You can create as many subdirectories and as many subpages as you like! Every directory can only have one index.html file, though!

Working locally

If you want to try all of this out, but don’t want to use Neocities yet, no worries! I’ll explain how you can easily test this all out on your own PC.

First, create a folder somewhere on your PC and name it ‘test site’.

Inside of that file, right-click and choose New Text Document. You should see the .txt extension of your file. If you don’t, you might have to turn on this setting to see file extensions.

Rename the file index.html – it will warn you of the file type, but click continue.

Right-click index.html, choose Open with... and pick Notepad or Notepad++ if you have it installed (not necessary, but useful and free).

Paste the following code:

<!DOCTYPE html> <html> <head> <title>My First Webpage</title> <meta charset="UTF-8"> </head> <body> <h1>Holy crap,</h1> <p>It's a website.</p> </body> </html>
Code language: HTML, XML (xml)

Then, right click the file and choose Open with… and pick your browser: Chrome, Firefox, etc.

Bam, you got a website!



Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.