Getting Started
Welcome to my tutorial on the basic HTML you will need to know to set up attractive pages and to solve these puzzles. Just take each section at your own speed. If you are totally unfamiliar with HTML, you should try each step on your own browser before going on to the next. Remember, this is for fun as well as the challenge of learning something new.
You can print this tutorial by clicking on Print on your browser and work through it on your own computer. You don't have to be on the Internet for this to work. I'm going to include a number of tips about using a computer that I found useful when I was starting out as we go through each step of the lessons.
The Browser
This tutorial is set up for a PC with the Netscape Navigator browser 4.0 or later and Windows 98. Most of the puzzles will also work with Microsoft's Internet Explorer, but there are some differences in how the browsers handle HTML. This is most apparent with Money Quilt and The Jewelbox. If you want to try these puzzles, you can get the Navigator browser for free at Netscape. Clicking on this link opens a new window. Close it to return here.
Creating Your Puzzle Folders
It is a good idea to set up a separate folder (also called a directory) to keep your puzzle files in so they are easy to access, with additional folders to keep the graphics files in. The puzzles can be worked with graphics files you already have on your computer or with graphics from my site. The main thing is that you can easily access the files you want. It's easier to get organized now than to go back once the numbers of files start getting hard to wade through to get to the one you want.An easy way to set up a new folder is to double click on the My Documents icon on your desktop to open the window, then click on File, highlight New, and go to the new menu that appears and click on Folder. Click on the name under the new folder to highlight it if necessary and type in whatever name you would like to call it, then press Enter to confirm the name. Create one folder named puzzles for your puzzle files, one folder named backgrounds for your background graphics files, and one folder named graphics for the picture files we will use later.
To create an icon for your desktop to access your folder directly rather than opening My Documents each time, right click on the folder and click on Create Shortcut on the menu that pops up. An icon for the shortcut will appear in the window. Put the cursor on it, hold down the left button, and drag it off the window onto the desktop. Release the button and it will be added to the icons on your desktop. Rename it to whatever you wish the same way you renamed the folder. You will only need an icon for the puzzle folder.
Your first HTML page
Now you are ready to create a file to display your puzzles. It is a simple HTML page which your browser can display for you on your own computer. You don't have to be on the Internet for this to work.You'll need to use a text editor like Notepad to type in this file and save it. Notepad, Wordpad, and Word are often included in the software that came with your computer. There are HTML editors specifically designed to create and display HTML pages, but you won't need one for this tutorial. In fact, since many hide the actual HTML codes and display the page contents only, you won't be able to see the file you are creating if you use one.
Notepad is the simplest to use since it doesn't add formatting codes, but it does have a lower memory limit than the other two do. It is usually enough for most HTML pages, but if you are working on an unusually complex or long one and you get a message that you have run out of memory, just save your file and reopen it in Wordpad or Word. If you use Wordpad or Word, be sure to save your HTML files as text files so that there are no extra word processor formatting codes saved. You want to save only what you see on screen, since any formatting codes might be mistaken for HTML codes or text to be printed.
Start by opening Notepad and then type the following lines. Press Enter after each line:
<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>
<BODY BGCOLOR="white">
This is where your puzzle will go.
</BODY>
</HTML>
Now save these eight lines in a file, using .html as the file extension. Click on File, Save As, change to your puzzle folder if necessary to make sure this file is saved there, and type the name in the file name box in quotes with .html at the end of the name. You should name this file puzzleform, so you would type "puzzleform.html" including the quotation marks so that it is properly saved with the .html extension and not a .txt extension.
If the editor doesn't display the file name in the list of files when you try to retrieve it to edit it, change the file type in the line at the bottom of the open files box to "All files (*.*)" to show the html files, too. It starts showing the .txt files at first, and will save a file as a .txt unless you override that by using quotation marks and a .html extension with the file name. Once you tell it that you are saving .html files by saving one, it should use a .html extension for further saves of the file. That's one point I have to watch myself, since the editor will default to a .txt extension unless you specifically tell it otherwise. The browser needs to have that .html extension on the file to tell it how to handle the file properly.
By the way, all those words in the < and > brackets are formally called tags. The <HTML> and </HTML> tags enclosing the whole file tell the browser that this file is written with HTML. The <HEAD> and </HEAD> enclose a set of formatting commands that include the page title line but may have many other commands about colors, fonts, and the like used in the page. The <BODY> and </BODY> tags enclose whatever you want to appear displayed on the page itself. Also, tags don't have to be in uppercase letters; the computer will recognize them in lowercase letters. I have them in uppercase letters here so that they are more recognizable as being HTML code instead of being part of the content of the page.
Displaying your page
Now for some fun! The file should be listed in your folder's directory with an icon like the browser icon, not the icon your computer uses for text files. You can see it by double clicking on your folder desktop icon to open the folder and see the files within listed with their icons. Double click on that icon for puzzleform.html. Your computer should start the browser and load your new file in it. The file's name will be in the Location line at the top of the browser, the information between the <TITLE> and </TITLE> will be on the top line of the browser, and the screen should display the message between the <BODY> and </BODY> codes. If it did, congratulations! You have just successfully displayed your first HTML page. If not, check the codes in the file carefully for mistakes and make sure you saved it as a text file with no formatting codes. If the browser loads your file in place of the tutorial page, just click the Back button at the top of the browser to return here.You can make a desktop icon for your puzzleform.html file to start it without entering the puzzle folder if you like. Right click on the puzzleform.html icon within the puzzle folder and ask the computer to make a shortcut for you, then drag it onto the desktop. Then you can double click on it when you want to see the file. This can be useful when you are reloading new versions of the file repeatedly as you experiment with it. Another time saver is to use the Reload button on your browser to load a newly edited version of the file. Tip: if you change the file and the browser doesn't show any changes, it may be using a copy from its cache (a copy set aside in memory to access quickly). You can clear the cache to start fresh by closing down the browser, then restart it by loading the puzzle file again. It is possible to clear the cache memory without closing the browser or to tell the browser to load a new page each time, but I refer you to your browser help index for the specific instructions for your browser.
Try using different messages on your browser page to practice saving and loading your HTML page until you are comfortable using the editor and browser. If you use a long message and want to start new lines within it, you can go to a new line using a <BR> line break tag. Try the message "Roses are red,<BR>Violets are blue,<BR>HTML is fun<BR>And easy to do!". Okay, so it's a little corny, but true! It should look like this:
Roses are red,
Violets are blue,
HTML is fun
And
easy to do!
This simple page can be used to display all sorts of text by replacing the line "This is where your puzzle will go." with whatever else you would like your page to say. However, it isn't very eye-catching. HTML allows you to specify background colors and patterns to add more appeal to your pages. That's the subject of the next chapter, Colors and Patterns.
Last update: August 4, 2001