Critically read the Lesson Text for this lesson.
Each page on your website will be stored in a file with a ".html" extension. Working on web sites can be a lot of fun, but it can get very frustrating if you are not organized. We recommend creating simple, meaningful names for each HTML file and organize the files for each project (web site) into a separate directory on your computer.
You have a lot of flexibility in how you create your web pages. Sometimes, all of those choices can be confusing. When you see the phrase "best practices" (either in our lessons or when reading online), what follows is normally a suggestion for the best way to do something.
Best practices are not requirements; they are just recommendations that have been tested over a long period of time by experienced web designers and software engineers. While you don't have to follow best practices, you should unless you have a really good reason to do something differently.
Best Practices for Naming Files and Folders
When naming files and folders, it is important to keep the names simple and meaningful. You should use names that describe what is in the file or folder and that are easy to understand.
Web site file and folder names should use any combination of letters, numbers, hyphens (-) and underscores (_). Dashes and underscores might be useful to separate multiple words that are squished together. You can also use capitalization to make your names more readable. If you have a page with information about "big brown spiders" for example, consider these possible file names:
bbs.html: This isn't very clear at all; what does "bbs" stand for?
bigbrownspiders.html: This is better, but it might be hard to tell where each word starts and stops.
BigBrownSpiders.html: Using capitalization to separate words is one good approach.
big_brown_spiders.html: You can also use underscores to separate words.
big-brown-spiders.html: Dashes are also a fine way to visually separate words.
i-really-hate-big-brown-yucky-spiders.html: OK that's a bit too much! Keep your filenames short and simple.
Creating Your Own Naming Pattern
When creating files and folders, you can choose your own naming pattern. There is no single, correct approach. Just make sure you are consistent in your naming patterns. This goes for folders, HTML pages and any other file types such as pictures. If you choose to use hyphens between words in the names ("tiger-picture.jpg"), make sure you ALWAYS use hyphens between words. If you use capitalization to separate words ("TigerPicture.jpg"), make sure you ALWAYS follow this convention. Consistency in file naming makes it easier to read your code and understand your site layout.
Consistent use of dashes, underscores, or capitalization makes your file names easy to read and makes you look like an expert. Pick one style and stick with it!
There are some characters that you should avoid in your file names. You should not use symbols such as "&", "@", and "?" in your file names. These characters have special meanings when it comes to web sites. If you use them in your file names, your site may not work properly.
There is one other character that you want to avoid in your file names: the space character. On your computer, it is OK to put spaces in your file names. However, when addressing a web page on a server, any spaces are converted to the special sequence "%20". This can make your filenames hard to read.
For example, let's say you have named your web page "My Site.html". Notice the space between the words "My" and "Site". This will work fine on your computer, but when you try to view the page in a web browser, you will see that the name turns into "My%20Site.html", which is ugly! We recommend you get in the habit of never putting spaces in your web site filenames or directory structures.
Managing Files with Windows File Explorer or Mac Finder
In order to find files, create and back up directories, or otherwise manage your web site, you will need to use the Windows File Explorer or Mac Finder applications that come built into your operating system. You should already have some experience with these programs before starting this course.
To launch the Windows File Explorer program for Windows 10, click on your Windows Start menu, select the "Windows System" folder, and then open the "File Explorer" shortcut. You may wish to right-click on the shortcut and select "Pin to taskbar" or "Pin to Start Menu" for easier daily access.
You can also click on the small search circle next to your Start menu, and then type in "file explorer" in the search bar. You will see the File Explorer application near the top of the list. You can right-click on the link to add the File Explorer to your taskbar or Start Menu.
It's easy to get "Windows File Explorer" confused with "Internet Explorer" since the names are similar. Windows File Explorer is used to manage the files on your hard drive, while Internet Explorer is a web browser. Make sure you are running the right program for the task you are trying to complete.On a Mac computer, you should be able to locate the Finder program in the Dock at the bottom of your desktop screen. Double-clicking on this icon (the blue and white face) will launch the Finder application. You can also usually see the Finder menu at the top of the screen when you are viewing your desktop.
Hidden File Extensions
A file extension is a suffix at the end of a filename that hints at the contents of the file. For example, a file extension like ".gif", ".jpg", or ".png" tells the computer that the file is an image file. A file extension such as ".txt", or ".rtf" tells the computer that the file is a text file. All of your web pages should have an ".html" extension.
Your computer will use these extensions to figure out what program to use when double-click on each file. An image file will be loaded in an image editing program like "Paint" or "iPhoto", and a text file will be loaded in a text editor like "Notepad" or "TextEdit". Your ".html" files will be loaded into your default web browser.
On modern computers, the operating systems will often hide the file extension for any file types that it recognizes. So instead of seeing the name "TigerPicture.jpg" in your File Explorer or Finder window, you might just see the name "TigerPicture". These operating systems figure you don't really care about the file extension, just the file name. In most cases, they are probably right! However, when you are coding web sites, this feature can actually get in your way.
For example, when you are using Notepad or TextEdit, you may find that your saved files are automatically given the extension ".txt" at the end of the filename. In this course, you will be instructed to add ".html" to your file name when you save it. But if your editor automatically adds the ".txt" extension, the filename may end up being "index.html.txt". This file will not be loaded correctly be a web browser! If the operating system is hiding the file extensions from you, the error can be very hard to detect.
The example below shows how hidden extensions (left) can give you the wrong impression about the actual filename (right). It's easier to verify you have the correct filenames if you can see the file extensions. Complete the "Work with Me" exercise below to make sure your computer is showing you the full file extensions in Explorer, Finder and other applications.
What are "best-practices"? Are they required?
Why is it important to have simple, meaningful names?
Ask students to create their own file and folder naming pattern, taking into account capitalization, special characters, and spacing. Give example names that meet those conventions. Why do they prefer the style they have chosen?
Why is it important to be consistent in file-naming patterns?
What characters should you avoid in file names? Why?
Demonstrate finding files using either Windows Explorer or Mac Finder.
What are file extensions? How are they used on a computer?
Why would you want to hide file extensions? Why would you want to "un-hide" the extensions?
The Lesson Text provides information about best practices for naming files and folders on a website. It emphasizes the importance of keeping names simple and meaningful, and suggests using a combination of letters, numbers, hyphens, and underscores in file and folder names. The text also highlights the use of capitalization, dashes, and underscores to visually separate words in file names. It advises against using symbols and spaces in file names, as they can cause issues with the website's functionality.
The Lesson Text further emphasizes the need for consistency in file naming patterns, whether it is the use of hyphens, capitalization, or any other chosen convention. It explains that consistent naming makes it easier to read code and understand the site layout.
The text also discusses the use of Windows File Explorer and Mac Finder to manage files and folders. It provides instructions on how to launch the respective applications on Windows and Mac systems, and clarifies the difference between Windows File Explorer and Internet Explorer.
Additionally, the Lesson Text explains the concept of hidden file extensions and the role they play in determining the file type and the program used to open it. It mentions that some operating systems hide file extensions by default, but this can cause issues when coding websites. It recommends ensuring that file extensions are visible to avoid errors.
Given the information presented in the Lesson Text, it provides a comprehensive overview of best practices for naming files and folders and managing them using the appropriate applications on different operating systems. It also addresses common issues that can arise, such as hidden file extensions, and offers solutions to prevent errors. Overall, the Lesson Text is clear and informative, providing practical guidance for organizing and naming files and folders on a website.
1. "Best practices" refers to suggestions for the most effective and efficient way to do something. They are not requirements, but recommendations based on the experience of web designers and software engineers.
2. It is important to have simple, meaningful names for files and folders because it makes it easier to understand their content and organization. Clear names also help in maintaining an organized and structured website.
3. Students should create their own file and folder naming pattern based on their preferences. They should consider factors such as capitalization, special characters, and spacing. Example names that meet these conventions could be "myWebpage.html" or "project_folder".
4. It is important to be consistent in file-naming patterns to ensure readability and organization. Consistency makes it easier to locate specific files and understand the overall structure of the website.
5. Characters such as "&", "@", "?", and spaces should be avoided in file names because they have special meanings in web addresses and can potentially disrupt the functionality of the website. Spaces in file names can lead to issues when addressing web pages on a server.
6. To find files, you can use either Windows File Explorer (for Windows) or Mac Finder (for Mac). These applications are built into the operating systems and allow users to manage files, create directories, and perform other file-related tasks.
7. File extensions are suffixes at the end of a filename that indicate the type of the file. For example, ".jpg" denotes an image file, while ".html" signifies an HTML file. Computers use file extensions to determine which program should be used to open the file.
8. File extensions are sometimes hidden by the operating system as a default setting. This is done to simplify the display of file names for users. However, when working with web development and coding, it can be helpful to see the file extensions to ensure correct file naming and compatibility. To "un-hide" file extensions, users can adjust the settings in their file explorer or finder.