Here are some tips that I’ve come up with, after watching our first HTML workshop with Castro’s book.

In this tutorial, you will learn how Windows makes sense of icons; you will learn how to reveal the file extensions (such as .txt or .html) that tell Windows what to do with files; and you will learn how to get around the default behavior that Windows assigns each type of file.

Clicking on Files

If you’re used to clicking on a file and having the right program pop up automatically, you might be surprised when we pick up where we left off and we need to edit the HTML and CSS files you created in class Friday.

Elizabeth Castro and I probably both first learned how to use computers in the days before the graphical user interface (GUI). I still think of the elements of a GUI (windows, icons, mouse, pointer – or WIMP) as a shortcut for doing things the old fashioned way.

Thus, when I see a file with a W icon, I think to myself, “If I click on this file, Windows will run Microsoft Word and automatically load this file so I can start editing it.”

There’s nothing magical or deeply technological about how the computer figures out what to do with a file when you click on it. But we’re using one program (a word processor) in order to create a file we want to use in a different program (a web browser). I could see from your reactions during class today that I should try to clear a few things up. So here is some background info.

What Happens When You Save a File

Open up MS Word, create a new file, and choose File -> Save. Put it on your I drive where you’ll be able to find it again, and give it the name “paper.”

MS-Word will actually give it the name “paper.doc”. You won’t see the “.doc” part, but that part of the file name – called the “extension” – is what the computer consults when it decides what icon to assign your file, and when it decides what to do when you click on that icon.

Now choose “File -> Save As,” set “Save as type” to “Plain text,” and save another file with the same name -- “paper”. The icon will be different, which in this case shows that its hidden file extension is “.txt”.

In order to see that there really are two different files with the same contents but different icons, click File -> Open, and make sure that “Files of Type” is set to “All Files.” You should see something like this:

Computers are great when they’re working in situations where each symbol has one and only one meaning. But we’re kind of cheating. We’re using a text editor (such as Notepad, Wordpad, or MS-Word) to edit files that we eventually want to view in a web browser. An HTML or CSS page is just a text file with a specific filename extension that tells the computer what to do with it.

Let’s take a peek under the hood, and change the default file display so that we see the file extension as well as the icon.

How to Reveal Filename Extensions

Click Start -> My Computer, and then navigate to wherever you saved your “paper” file. Select Tools -> Folder Options…

You should see the following dialog box appear:

Find the option that reads “Hide extensions for known file types” (you may have to scroll down) and uncheck that box. (You don’t want to hide those extensions – you want to see them, so you can change them if you have to.)

When you view the contents of the folder that contains the two “paper” files, you should now see the full file names -- “paper.doc” and “paper.txt.”

We can easily trick the computer. Right-click on “paper.txt,” and select Rename.

Now, change the extension from .txt to .html.

You’ll get a warning message that tries to scare you away from doing this, but just click “Yes.”

Now look what happens to the icon. The file “paper.txt” not only has a “.html” extension, but the icon changes.

Since I’ve set my computer to open all .html pages in the Firefox browser, this example shows the Firefox icon. Your computer will probably show a different icon, but what’s important is that the icon has changed.

When you continue your HTML workshop, if you click on “ceramics.html,” your computer will recognize that file as a web page, and will open that file in a web browser, because the designers of Windows figured that most people want to view web pages when they click on them.

You actually want to keep editing the page, but the computer doesn’t know that.

Let’s open paper.html in an editor, so that we can keep working on it.

Right-click on the file, and from the menu that pops up, choose “Open With” and select an editor. I recommend Wordpad. Notepad is older and simpler, and will still do everything you need to do for this class. MS Word has a spell-checker, but it will also try to capitalize words for you and may make silent changes to the text that can cause problems later.

Review of Castro HTML Workshop 1

By page 18, you should have two separate files – one called “ceramics.html” and one called “saras_styles.css”.

If, after you have revealed the filename extensions, you see files named “ceramics.html.doc” or “sarahs_styles.css.txt” or something similar, then you should open them in your word processor, and carefully follow the instructions on page 6 (for the HTML page) and steps 2 and 3 of page 11 (for the CSS page).

In this section of the book, Castro uses peach-colored box when you are supposed to be adding something to the ceramics.html file, and a green box when you are supposed to be working with sarahs_styles.css. In both cases, the new stuff you should type appears in black, while the colored text is supposed to be what you have typed earlier.

The content that you want your reader to see goes in “ceramics.html,” along with some coded information (“tags,” such as the opening tag <h1> and the closing tag </h1>) that your reader will never see.

The other file, “saras_styles.css,” contains only format and layout information. Your reader will never see that information directly.

The color that Castro chose for the background is so close to white that it looks like it’s not changing the page. Instead of EDF2FF, try 00EE00 (which is bright green – too horrible to behold for long, but useful as an example) or choose some other color from pages 113-115.

Castro could have been a bit clearer on page 11, where you are asked to create a new file called “sarahs_styles.css,” and on page 12, where the text you are supposed to type actually goes in the ceramics.html file -- not the sarahs_styles.css file that you’ve just created. On page 12, you are telling the computer that your file called “ceramics.html” uses the formatting information in the file called “sarahs_styles.css.” Later, you will create other pages that also use the same styles. This will be useful later, if you have a website with 40 pages and a client wants you to change the background color. (You’ll be able to change it just once, in your stylesheet, rather than having to edit all 40 pages on your site individually.)

Contents of the file named ceramics.html (by page 18)

<html>

<head>

<title>Sarah’s Notecards – Ceramics Collection</title>

<link rel="stylesheet" type="text/css" href="sarahs_styles.css" />

</head>

<body>

<h1>Ceramics Collection</h1>

<b>The notecards in the Ceramics collection feature closeups of gorgeous, colorful pottery from Andalusia and Catalonia.</p>

</body>

</html>

Note

A stylesheet is a set of formatting guidelines that your browser consults when displaying the contents of an HTML file. In the page ceramics.html, this bit of code

<link rel="stylesheet" type="text/css" href="sarahs_styles.css" />

tells your web browser that the file “sarahs_styles.css” contains the formatting instructions to be used when displaying the page in which the link appears.

Contents of the file “sarahs_styles.css” (by page 18)

body {background: #00EE00;

font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;

color: #4D65A0}

h1 {margin:0}

p {margin-top:0; margin-bottom:12px}

Troubleshooting tips

Keep your file and folder names simple. Avoid apostrophes or other unusual characters. Spaces will work, but it’s better to replace spaces with the underline character. Thus, instead of calling a folder “jimbo’s cool folder of amazing awesomeness!!” try instead “jimbos_folder” (or even better, just “jimbo”).

Don’t open multiple copies of a file. If you already have a file open in one program, sometimes you will get an error message when you try opening it in a different program. Close down all windows that you’re not using.

Capitalization counts. If you called your file “Sarahs_styles.css” but elsewhere you referred to “sarahs_styles.css,” a web server may or may not consider them the same file. It’s better to assume that capitalization always counts.