Working with Files

A website consists of many files: text content, code, stylesheets, media content, and so on. When you’re building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right, before you eventually upload them to a server. Working with files discusses some issues you should be aware of so you can set up a sensible file structure for your website.

Naming your files

  1. Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at test-site/MyImage.jpg, and then in a different file you try to invoke the image as test-site/myimage.jpg, it may not work.
  2. Browsers, web servers, and programming languages do not handle spaces consistently. For example, if you use spaces in your filename, some systems may treat the filename as two filenames. Some servers will replace the spaces in your filenames with “%20” (the character code for spaces in URIs), resulting in all your links being broken. It’s better to separate words with dashes, rather than underscores: my-file.html vs. my_file.html.

What file and folder structure should your website have?

Next, let’s look at what structure our test site should have. The most common things we’ll have on any website project we create are an index HTML file and folders to contain images, style files, and script files. Let’s create these now:

  1. index.html: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file called index.html and save it just inside your test-site folder.
  2. images folder: This folder will contain all the images that you use on your site. Create a folder called images, inside your test-site folder.
  3. styles folder: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called styles, inside your test-site folder.
  4. scripts folder: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder called scripts, inside your test-site folder.

Publishing your site

There are two important things to do when publishing your site:

  • domain name — the unique address where people can find your website, like http://qwkdog.com. You rent your domain name for so many years from a domain registrar. Most major web hosting sites also provide domain name registration.
  • Hosting — rented file space on a hosting company’s web server. You put your website files on this space, and the web server serves the content to web users who request it. There are dozens of web hosting services – you’ll need to do some research to see which one is right for you.

For people to see our content, we need to move our files to the web server. We use an File Transfer Protocol (FTP) program to transfer the website files over to the server. FTP  programs vary widely, but generally you have to log on to your web server using details provided by your hosting company (e.g. username, password, host name). Then the program shows you your local files and the web server’s files in two windows, so you can transfer them back and forth. In this example, I’m using the open source FTP tool FileZilla to connect to the web server.

You can also directly set up your web hosting credentials to work with Git and other code editors.

ftp-example

Source: Adapted from Mozilla