It's about files (mostly)

The web works by sending files to browsers. Some other things as well, but mainly sending files to browsers.

Different types of files have different data in them. When a browser gets a file, it looks at the type of file, and does what that type of file requires.

Plain text files

Try it. Start your IDE. For this one time, you can use a simple editor, even Notepad.

Don't use Word, or another word processor. They add formatting characters to files. We want plain text.

In a new file, type some text. I typed:

Save the file somewhere on your computer. Call it dog.txt. Note the extension. That tells browsers what type of data is in the file. txt means plain text.

Now open that file in a browser. Try Ctrl+O to show the Open file dialog.

The browser loads the file, looks at the extension, and knows it should show the data with a plain font. Here's what I saw:

You can see exactly what data the browser read from the file. Try Ctrl+U. That's a shortcut for Show source. It shows what the browser read, before it displayed the data. BTW, rendered is another word for what a browser does when it displays data it has read.

What you did:

• You made a text file.
• You told the browser to open it.
• The browser read the file, and got the data it shows on the Show source page.
• The browser showed the contents of the file.

The browser doesn't do anything with data in a txt file. Just shows it. That's why the source and display pages are the same.

HTML files

Start the editor again, with a new file. Copy-and-paste this:

<h1>Rosie</h1>
<p>Rosie is a good dog.</p>

<h1> is a heading. <p> is a paragraph. We'll talk about the tags later.

Save the file as dog.html. Notice the different extension. When a browser gets an HTML file, it knows it has to interpret the data before displaying it.

Open the file in a browser. You'll see something like:

Hit Ctrl+U again. Remember, that shows the data that the browser received, before displaying it.

The page source view shows the data that the browser received. Browsers interpret that data, depending on the file extension.

Showing HTML as text

Let's trick the browser. You made a file called dog.html. The browser looked at the extension, and made an appropriate display for the user.

Now, make a copy of dog.html, and call it dog-html.txt. What's going to happen when you open the new file in a browser? Try to predict what's going to happen, before reading on.

OK, open dog-html.txt in a browser. Here's what I saw:

The browser didn't interpret the HTML tags. Why? Because the file extension was txt. Browsers just show the contents of txt files. They don't do any translation.

An image file

Find an image file somewhere on your computer. I'm going to use the file rosie1.jpg:

Open the file in your browser, with Ctrl+O. The browser looks at the file extension, jpg. It says to itself, "Self, jpg means that the data in the file is an image." So that's what it shows.

Another common image extension is png. It's a different way of encoding the color data. jpg is usually used just for photos. png can show photos and drawings equally well.

About file names

How you name files matters. Most web servers run the operating system Linux. Linux file names are case-sensitive. So Dog.html and dog.html are different files.

It's annoying.

The URLs that access those files (URLs are covered later) are also different. So https://eligiblemonkeys.net/Dog.html and https://eligiblemonkeys.net/dog.html are different.

It's common to want to name a file with two words, like giant flea.html. That works… mostly. It causes problems sometimes.

Also annoying.

The solution? When you name files, use these two rules:

• Lowercase only
• To separate words, use dashes: -

So name your files like this:

• dog.html
• giant-flea.html
• evil-ant.jpg

It's good to start good file naming habits now. It will save you grief later.

Summary

Browsers show files. The extension of a file tells the browser how to show the data in the file.

• txt – a text file. Show the data as-is.
• html – an HTML file. Interpret the data as HTML tags.
• jpg – an image file, stored using the JPEG format.
• png – an image file, stored using the PNG format.

For file names, lowercase, and dashes.