Experiment 1
— print (last updated: Jun 28, 2009) — print

1. Change the Folder View in Windows to show file extensions:

   • Open any folder, such as My Computer or My Documents
   • Go to Tools Folder Options
   • Select the View tab.
   • Uncheck the box "Hide file extensions for known file types"

   I recommend that you do this once and for all on your home PC — stop Windows from treating you like a baby — and whenever you begin this class on the WCU PC you're at (because of deepfreeze).
2. Open HTML-Kit. Create a new file. Observe that the standard HTML structure is already created in a default file.
3. Configuration steps:
   • Delete the window on the right-hand side. This is called the Workspace Window, and you can always retrieve it by reselecting: Window Menu Workspace Window
   • Undock the Messages Window, this is the window at the bottom. Do this by clicking on the left-hand bar and dragging it somewhere else. Then make it bigger so you can see the validation messages.
     If you want to dock it again, double-click on the top bar.
   • (Optionally) Make the editor font size bigger. Go to Edit Preferences. Select the Editor tab. Select the Text Font/Color button. Choose a larger size, say 12, and OK your way out.
4. Copy/paste the following between the body tags of the file created.

   My first web page, using HTML-Kit.
   
   Here is a list of a few things I've learned:
     what HTML means
     a few HTML tags
     how to use HTML-Kit
   
   Here is a line.
   Here is a second line.
   
   This is a separate paragraph.
   

5. Save the file in the folder you created as: first.html on the Desktop. Initially you will need to navigate from HTML-Kit's default save location. Afterwards, the opening and saving of files will be from the previous location (on your home computer, anyway).
6. Look at the result in the Preview window. Generally, you'll be going back and forth between the Editor and Preview windows.
7. The tag generators are represented both as icons in the tabs and as selections in the Actions menu.
8. Surround the first line with: <h2> </h2>.
   Do this by selecting the line, locating the H1 among the icons in the Document tab, clicking on the down-arrow to obtain a menu and selecting Heading 2 from the menu.

   If you use this at home, you probably want to start adding the common tag generators to your Favorites tab. Do this for H1 by right-clicking and selecting Add to Favorites from the popup menu.

9. Surround the three list entries in the next paragraph with <ul> </ul> and surround each entry of the list with <li> </li>.
   Do this with the unordered list icon and the list entry icon found in the Text tab.
10. Separate the next two lines by inserting a line break between them: <br />.
    Do this by positioning the cursor and clicking the BR icon from the Text tab.
11. Format the next line as a separate paragraph by surrounding it with the paragraph tags: <p> </p>.
    Do this by selecting the paragraph (just one line) and then clicking the paragraph icon from the Text tab.
12. Make the word separate in the last paragraph appear bold.
    Do this by selecting the word, and clicking on the B icon from the Text tab.
13. Check your code using the built-in verifier, TIDY.
    The easiest way to do this is to right-click on the editor window and select Check Code Using TIDY. This action will have the following effects:
    • the view is converted to Split
    • the right-hand side of the Split creates a improvements of your code, such as completing a missing closing p element tag.
    • the messages window points to any lines it considers to be errors
    throw you into the Split View pane and any errors or warnings plus other information will appear in the Messages window at the bottom. As you click on the lines which appear in the Messages window the left side window will point you to the position of the warning or error for correction.
14. View your page in modern browsers.
    • With Internet Explorer (IE), you probably only need to double-click on first.html.
    • With Firefox, select File Open and navigate to first.html.
15. Change the title i.e., the text within the title tags from "Untitled" to "First Page". To pick up the changes in IE and Firefox, you have to refresh the browser.