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
- 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.
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.
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
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 are different files.
The URLs that access those files (URLs are covered later) are also different. So
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.
The solution? When you name files, use these two rules:
- Lowercase only
- To separate words, use dashes: -
So name your files like this:
It's good to start good file naming habits now. It will save you grief later.
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.