Day+1+Files

If you use a computer, you know about files. Every time you create a word processing document, you put it in a file and store it on your disk. Here's a picture of a word processing document. If you were to peek inside that document and see the way it actually looks inside the computer, you'd find something like this:

Your Own Website
 * Building

I hope this guide is helpful Share it with all your friends! ||

As you can see, the word processor stores lots of other fascinating tidbits in the file besides what you put in there. It uses that to tell itself how you want your document displayed -- what font and size to use (see where it says "Palatino"?), whether to center the text, and all the other formatting you can do. Let's call that stuff **Gunk**. The word processor puts that gunk there when you type in your document and knows what to do with it when you open it up the next time. So every word processing document you create has two things:
 * Your words (and pictures)
 * Gunk

Web Gunk
==There's a similar kind of GUNK that web browsers use to display web pages. The difference is, with web pages you can write your own gunk. == ** HTML - Hyper Text Markup Language ** is the language you use to write your own web gunk.

Text Editor
Since we're writing our own gunk, we can't use a word processor. Word processors add gunk of their own and the only gunk we want in this file is the gunk we put there ourselves. So we need to use a type of program called a text editor. Text editors put absolutely no gunk into the files they create. The only thing that ends up in the file is what you put there yourself. That's what we want. On the Mac, a great freeware text editor is BBEdit Lite, available from Bare Bones Software (http://www.barebones.com). Or you can use SimpleText/Text Edit which already comes with every Mac. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">In Windows, you can use NotePad. In these examples, we'll use SimpleText, but the idea is exactly the same. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">So fire up your text editor and let's write some HTML.

<span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">Every web page gets its own file.
<span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">The file name should end with **.html** (**.htm** in Windows) and be called something descriptive, like: > ** index.html ** <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">Now just follow the steps. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">Launch the text editor by double-clicking on its icon. <span style="font-family: 'Comic Sans MS',cursive; font-size: 170%;"> The SimpleText/Text Edit looks like this: <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">You may launch NotePad in Windows from the Start button: click the Windows Start Button, select Programs, select Accessories, and then select NotePad. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;"> <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;"> On your Mac, open the Text Edit, and click on Preferences. Choose the options listed below in the Open and Save tab before moving on to the next step.
 * <span style="color: #000066; font-family: Geneva,Arial;">1The Text Editor ||

<span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;"> <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">Go to the **File** menu and select **New**. You get a blank page. This is where we're going to put our HTML. Type this: > **<span style="color: #0000ff; font-family: Geneva,Arial;"><HTML> ** <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">Then hit Return a few times and type this: > **<span style="color: #0000ff; font-family: Geneva,Arial;"></HTML> ** <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">Our first bit of gunk! <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">This marks the beginning and end of the file, which should now look like this. The gunk tells your browser that it is looking at an HTML file. <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"></HTML> ** ||
 * <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><HTML> **

<span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">There are two other bits of gunk we need to add to get our file ready. We need to define the beginning and end of the file header, and the beginning and end of the body of the file: <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><HEAD> </HEAD> ** <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><BODY> </BODY> ** <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"></HTML> ** || <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">Notice anything? Yup, you can tell GUNK in a file by these things **< >**, and notice that they usually come in pairs, one marking the beginning and one marking the end of whatever it is: <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;">< ></ > ** <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">So far all we have is gunk; let's put in some content. Let's make a web page that says, "I am an HTML Author." <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">The words and pictures in an HTML file go in the Body of the file, so let's put our words there. <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><HEAD> </HEAD> ** <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><BODY> ** <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="font-family: Geneva,Arial;">I am an HTML Author. ** <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"></BODY> ** <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"></HTML> ** || <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 160%;">NOTE: Your file actually looks something like the one below. However, to help you keep your content separate from your gunk, in the guide we'll use examples like the one above where the html is blue and the content is black. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">Save the file, just like you would save a word processing file, by selecting **Save** from the **File** menu and typing in the name of the file. Let's call this one **test.html**. <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">Just remember the location of the folder in which you save it! <span style="color: #000066; font-family: 'Comic Sans MS',cursive; font-size: 170%;">Now you can launch your browser and look at your file, just as if it were a real web page, which it is! You can use your browser to look at files on your disk as well as pages on the Web. In Netscape or Explorer, select **Open Page** or **Open File** from the **File** menu, locate the folder where you saved **test.html,** and open it. (NOTE: If your browser connects you to the Internet and goes to the same web site every time you launch, you can make it stop. In Netscape, select Preferences from the Edit menu, click on Navigator in the category list, select Blank Page, and click on OK. In Explorer, select Preferences from the Edit menu, click on Home/Search in the list under Web Browser, click on the "Use None" button, and click on OK.) Here's what it looks like when you open the file you just created: Congratulations! You've just written your first web page. Now let's move on to Words.
 * <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><HTML> **
 * <span style="color: #000066; font-family: Geneva,Arial; font-size: 160%;">2Content ||
 * <span style="font-family: 'Comic Sans MS',cursive; font-size: 160%;">**<span style="color: #0000ff; font-family: Geneva,Arial;"><HTML> **
 * <span style="color: #000066; font-family: Geneva,Arial;">3Save the File ||
 * <span style="color: #000066; font-family: Geneva,Arial;">4Launch the Browser ||