Note: This interview is 6 years old. It was part of a training resource for beginner interactive media students. Though web technology has changed, the principles discussed are still relevant.
- You need understand what files and folders really are.
- Files are unique entities on the computer.
- Folders are where files are located.
- When building a website, categories your files in folders that reflect the file types.
- File extensions have specific meanings for the web browser.
- Save files with the correct file extensions.
REECE: So I want you to talk about file size and file types, and directories and naming conventions and these things. There’s a lot in this, in a way, because it also has impact as you were inferring on
the URL itself, because the folder name will come back in here. Let’s start at the level of management of files or folders, and things like that, too. Because a lot of students out there,
don’t really understand, the importance of creating proper directories.
JOHN: I think one of the first things is to try and clarify to yourself what a file actually is, and what a folder and directory is, and I find that many people that are beginning web design can even be confused on that level. They treat it like it’s a name for something, when really you got to look at the file as being an unique entity on the computer. The folder is the location where the files are being placed.
REECE: A folder for your documents.
JOHN: A folder for your documents, so you know you’ve got word documents or things like that in there, and files for your mp3 files, if you got music in there.
The advantage of doing this is it categorizes things a bit clearly, you know when you are in a given folder, and it contains files like of a given type. Particularly, the files for your homepage, where you don’t want to go to the folder and actually see that it’s got two HTML files, five JPEGs, four GIFs, three MP3s and so on. It actually gets quite confusing. By separating file types into their own folders, it allows you to go and view that folder and know that the content of that is going be one particular type of content, and not get confused and go an edit index.GIF, thinking its index.HTML. The other thing that the page developer needs to get their head around is, what the different files actually are, and the use of the extension, the three of four letters that you find after the dot in the filename. So as I indicated earlier, you can have index.html, you can have index.htm and you can have .asp, there’s .gif, there’s .css, and .js. They all have specific meanings and those meanings are used by the web server to identify the file type to the web browser when the file is uploaded from the internet. So if you got a web page and you called it .fish instead of .HTML, the web server is not going know that is a HTML page when it is uploaded to your web browser. It (the webserver) can’t tell it what sort of files it is and it (the browser) doesn’t know how to interpret it. Likewise, with the images, you have to make sure they got the right extensions, that your GIF files have .gif, JPEGs have .jpg, even using PNG, which is more recent image format, you add .png .
I have a recent situation where the designer actually saved .png files with the .jpg extension. So they were PNG files but named as a .jpg instead. It worked on several web browsers and it didn’t work on another one. In fact it worked on Safari, it worked on Firefox but it wouldn’t work on IE. Didn’t pick it up until it actually on another computer.
REECE: So it was just named wrongly. It wasn’t converted in to this other type of files.
JOHN: Yes that is correct. It was simply misnamed and it’s the sort of mistake you can make when you are saving something.
The problem is when make a mistake like this, you can actually waste hours trying to find the fault. Likewise, when you start using folders, is to get used to the way the web browsers track the folders to know where to find an image. If you are creating a HTML page and your images are in the image folder, then you should make sure that you do indicate within your code that the browser goes to the image folder to get the image. Don’t just say that image is dog.gif and when you’ve actually got to say something like, you know, /images/dog.gif . Otherwise, again you get the broken image in the browser and you end up running around spending
hours try to fix the fault that was just caused by the fact that you’re sloppy in naming.