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.
1. What are "best-practices"? Are they required?
2. Why is it important to have simple, meaningful names?
3. 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?
4. Why is it important to be consistent in file-naming patterns?
5. What characters should you avoid in file names? Why?
6. Demonstrate finding files using either Windows Explorer or Mac Finder.
7. What are file extensions? How are they used on a computer?
8. Why would you want to hide file extensions? Why would you want to "un-hide" the extensions?
1. "Best practices" are recommendations for the best way to do something, based on the experiences of experienced web designers and software engineers. They are not requirements, but it is generally advised to follow them unless there is a good reason not to.
2. It is important to have simple, meaningful names for files and folders to make them easy to understand and organize. Descriptive names help identify the content of the files or folders, making it easier to navigate and manage a website.
3. Students should create their own file and folder naming pattern, considering factors like capitalization, special characters, and spacing. Example names that meet these conventions could include: "AboutUs.html," "Products_folder," "contact_form.php." Students may prefer their chosen style based on personal preference or readability.
4. Consistency in file-naming patterns is important because it makes it easier to read and understand code, and it helps maintain a clean and organized site layout. When working on a project, having a consistent naming convention throughout makes it easier to locate specific files and maintain the overall structure of the website.
5. Characters such as "&", "@", "?", and spaces should be avoided in file names. These characters have special meanings in web addresses and can cause issues or make the filenames hard to read. Spaces are converted to "%20" when addressing a web page on a server, which can result in unreadable filenames.
6. The lesson suggests using Windows File Explorer or Mac Finder to find files, create and back up directories, and manage a website. It provides instructions for launching Windows File Explorer on Windows 10 and locating Finder on a Mac computer.
7. File extensions are suffixes at the end of a filename that indicate the type of file it is. They are used to determine which program should open the file when double-clicked. For example, ".jpg" indicates an image file, ".txt" indicates a text file, and ".html" indicates a web page. File extensions help the operating system understand how to handle a file based on its type.
8. File extensions are sometimes hidden by default on modern operating systems because it assumes users are more interested in the file name than its extension. However, in web development, it is important to see file extensions to ensure correct file types are used and to avoid issues with file compatibility. "Un-hiding" file extensions allows for easier verification and management of file names in certain situations.
1. "Best practices" are recommendations for the most effective and efficient way of doing something. They are not required, but following best practices is generally recommended unless there is a compelling reason to do otherwise.
2. It is important to have simple, meaningful names for files and folders because it makes it easier to understand the content of the file or folder. Clear and descriptive names help with organization and make it easier for others to navigate and understand your web site.
3. Students should create their own file and folder naming pattern based on their preferences, taking into account capitalization, special characters, and spacing. For example, they can choose to use lowercase letters with hyphens to separate words, such as "my-web-page.html" or they can use camel case with no special characters, such as "MyWebPage.html". The preferred style will depend on individual preferences and readability.
4. It is important to be consistent in file-naming patterns because consistency helps with readability and organization. When all files are named consistently, it is easier to locate specific files and understand the structure of the web site.
5. Characters such as "&", "@", and "?" should be avoided in file names because they have special meanings in web sites and may cause issues with how the site functions. Spaces should also be avoided because they are converted to "%20" when addressing a web page on a server, which can make the filenames hard to read.
6. To find files, you can use either Windows File Explorer on a Windows computer or Mac Finder on a Mac computer. In Windows 10, you can launch Windows File Explorer by clicking on the Start menu, selecting "Windows System", and opening the "File Explorer" shortcut. On a Mac, you can usually find Finder in the Dock at the bottom of the screen and double-click on the icon to launch it.
7. File extensions are suffixes at the end of a filename that indicate the type of file. They are used by the operating system to determine which program should be used to open the file. For example, ".jpg" indicates an image file and ".html" indicates a web page file. It helps the computer recognize and process different types of files.
8. File extensions may be hidden on modern computers as the operating systems assume that users are more concerned with the file name than the extension. This can be inconvenient when working with web sites because the correct file extension is important for web browsers to correctly load the files. To "un-hide" file extensions, you can adjust the settings in the File Explorer or Finder preferences to show file extensions. This allows for easier identification and verification of file names.