When you work on a local website on your computer, you should keep all associated files in a single directory that reflects the file structure of the website published on the server. This directory can exist anywhere you want, but you should put it somewhere where you can easily find it, maybe on the Desktop, in the Home directory, or at the root of the HDD.
1. Choose a place to store your site projects. Here, create a new directory called web projects (or similar). Here you will find all your web projects.
2. Inside this first directory, create another directory to store your first website. Call it a test website or something more intuitive.
You will notice that throughout this article, please name directories and files using lowercase letters, without spaces. That’s because:
1. Many computers, especially web servers, are case-sensitive. For example, if you upload an image to your site at website/image.jpg, and then in another file, you try to invoke the image as your testwebsite/image.jpg, it may not work.
2. Browsers, web servers, and programming languages do not consistently manipulate spaces. For example, if you use spaces in the file name, some systems may treat the file name as two filenames.
Some servers will replace the file namespaces with “% 20” (the character code for URIs), which will cause all your links to be broken. It is better to separate the words with hyphens than with underscore: my-file.html vs. my_file.html.
The short answer is that you should use a hyphen for your file names. The Google search engine treats the hyphen as a word separator, but it does not treat the underscore character that way. For this reason, it is good to get used to naming directories and files using lowercase letters, without spaces and words separated by a hyphen, at least until you know what you are doing. That way, you will have less trouble.
Next, let’s look at what structure our test site should have. The most common things we will have for any web project we create are an HTML index file and directories that contain images, style files and script files.
Let’s create them now:
1. Index.html: This file will generally contain the content of your homepage, that is, the text and images that users see when they first visit your site. Using your text editor, create a new file called index.html and save it inside your site test directory.
2.Images directory: This directory will contain all the images that you will use on your site. Create an image directory inside the test site directory.
3. Styles directory: This directory will contain the CSS code used to style your content (for example, setting text and background colors). Create a styles directory, inside the test site directory.
4. The scripts directory: This directory will contain the JavaScript code used to add interactive functionality to your site (eg, buttons that when pressed upload data). Create a scripts directory, inside the test site directory.
On Windows computers, you may have difficulty seeing file names because Windows has an option called Hide extensions for known file types that is enabled by default. In general, you can disable this option by going to Windows Explorer, selecting Folder and Search Options, clicking the View tab and clearing the Hide extensions for known file types checkbox, and then clicking OK. For more specific information that covers your version of Windows, you can search the web.