My Web Training

📖 File Management

File Name Conventions

Using a space in a URL allows a special character to be used in place of the blank space. To use 'graphic artist' in a URL, the space would be replaced with its ASCII character (%20), resulting in 'graphic%20artist'. If you must have a space, use an '_' underscore or '-' hyphen (preferred) as the space, such as 'graphic_artist' or 'graphic-artist' (preferred). It is also important to note that as more users access pages from their mobile devices, using special characters and numbers can be awkward on a mobile virtual keyboard or keypad.

This URL https://mywebtraining.net/MySite/Contact Us.html shows up like this: https://mywebtraining.net/MySite/Contact%20Us.html in the browser address. To learn more about URL encoding, visit the W3 Schools URL Encoding Reference page.

First, a user will be confused by the %20 in the URL. Browsers automatically change these special characters and blank spaces. Secondly, if the users don't get the uppercase letters right, most servers won't find the page.

A better way to name your files would be about-us.html so the URL would be https://mywebtraining.net/MySite/contact-us.html.

Again, no spaces.
You must use a 3 or 4 letter extension, ending the file name with the html or htm extension. Or, graphic files, such as .gif or .jpg or .jpeg, etc.
For consistency, use only lower case letters in your file and directory names! (Except for your avatar name. It's set by the server.)
Avoid special characters whenever possible.

File Directories

When creating your directory structure on the server, it's important to know that the directories are used in the URL of your site pages. The top level directory is called the root directory. Most sites' root directories are found by simply typing in the domain name into a browser. IE: google.com. When the server receives this request, it looks in that directory for a file called index with an extension of htm, html, php, etc. Well, not etc, but I think you get the idea. This means it's very important to have an index page in each directory to act as a default (Home) page that displays a navigation menu that includes all other html files. Doing this will allow visitors to access your site pages without having to guess.

You will learn quickly that hyperlinks are the magic that makes the internet work. Without them, we wouldn't know the URLs of most of the pages we want to visit.That's because the URL is a combination of the domain name along with the directory path and filename. These names are created by each web developer and can vary greatly.

A best practice for students is to create a directory for each of your classes. IE: javascript, php, etc. In the top level directory, known as the site root directory, create a home page named index.html and make sure to include a nav menu with links to all the pages in your site. Providing these to your users makes it possible for them to find your relevant files. This is so important that you can consider any files not linked from the nav menu to be practically invisible to your visitors, including your instructor. How will your instructor grade your site if they cannot find your pages?

username.github.io/repo - domain
repo name - your site root directory
resource [sub]directories - contain support resources (dependencies)
files - named following the accepted naming conventions

Directory Structure

You will want your files and folders from your local computer (or VDI) to closely match the files and folders in your server account. Try to create a file structure in your repo that matches the file structure of your site.

Image of local file structure showing directories and sub-directories — Local File Structure

A note about directories in this example.

The directory names that begin with an underscore (_) are for resource directories. A resource directory is a directory used to store resource dependencies for the site files. For example, if your site uses style sheets, they would be placed in the _css resource directory. The same goes for images used in your site. They would go in the _images directory.

The other directories (javascript, php) would be used as sub-directories for the site to hold site files for additional pages. In this case, they would hold files for the javascript class and the php class, respectively. Each of these directories might have directories that hold, css, images or javascript files in their resource directories essentially duplicating the site root organizational structure.

NOTE: Some systems like GitHub will not know how to read these underscored files and not produce the desired results for your site. For example, if you use an underscore before the css label in the _css sub-directory, GitHub will not recognize the directory and will not be able to find the CSS files for your GitHub pages. Since using these underscores is optional, it is safe to simply not use them.

Image of GitHub file structure showing directories and sub-directories — GitHub File Structure

Site Nav Links