Hands on computers
Basics I
Text Editing, and HTML

HTML (Hyper-Text Mark-up Language) is the language of the World-Wide Web (WWW). It is a very simple language, and fortunately you don't need to know very much to do some very interesting things!

We'll now practice your computer skills as you take an existing HTML document and modify it to create a home page for yourself. We could call this page our

The home page you create can serve as both an organizational tool and a presentation device. It helps you to keep your ideas together in one place, and present them nicely to the public (if you wish!).

Objectives:

• To check and review current knowledge (e.g. saving, editing, and printing files; making directories (or folders); searching for files)
• To learn elementary "tags" (commands) of HTML
• To use Notepad (a simple word processor) to create a basic HTML document (your home page!)

Activities:

1. We'll start with your web browser (the application that you're using to view this page). I prefer Netscape, but others like Internet Explorer. Please use Netscape for this exercise, so that the directions are easy to follow! Please print out a copy of this page. If you have any problems, just holler!

   If you get lost following a link, then Netscape has several ways of getting you back:

   • Use the "Back" button near the top
   • Use the "Go" menu item at the top
   • Type (and hold) the "Ctrl" key, then type the "h" key.

2. Create a directory for your own use (your "home" directory). Ideally you would create this on the C: drive, and give it a name which safely identifies it as your own (so that it won't be confused with anyone else's directory). From now on, you should keep your files in this directory (as much as possible). You may also want to create subdirectories of this directory now, too: subdirectories help you to organize your work. You should create at least one, for the images that you are going to save to this directory. Call this subdirectory of your home directory "images".

3. Save this web page to your computer, and then use the Windows Accessory Notepad to explore this page.
   • We'll start with your web browser (the application that you're using to view this page). I prefer Netscape, but others like Internet Explorer. Please use Netscape for this exercise, so that the directions are easy to follow!
     1. click on the File menu button at the top left of the window,
     2. click on "Save As"
     3. choose the directory in which you want to save the document. You should use the "Create new folder" button to make a new subfolder of your home directory to hold your web documents (it looks like this: ).
     4. click the save button, and the document should be saved. If you don't make a conscious effort to change the document's name, it will be called "day1session1.html", which explains this page's function!
     The document should now be saved. If so, congratulations! If not, seek help immediately!

   • Now it's time to run Notepad. It can probably be found as follows:
     1. click on the Start button in the lower left of your screen,
     2. select Programs,
     3. select Accessories
     4. select Notepad
     Notepad will start up, without any document showing.

     Suppose Notepad isn't there; then you would want to perform a search for it. In general, the easy way to search in Windows is from the Start button: when you click on it, you'll see that "Find" is one option; click on that, and select "Files or Folders". You'll be presented with a dialog which asks you to give a name, and the directory to look in. Type "Notepad" (without the quotes), and make sure that you're looking in the C: drive. If we're lucky, "Notepad.exe" will show up (in addition to a lot of other files). If you click on Notepad.exe, then you'll have a second Notepad program running (which is definitely one too many); so quit one of them.

   • To open this file (day1session1.html), you need to use Notepad's File menu button, then the Open option: you'll go to the directory which you created above, and then you may need to switch from file types of Text Documents, Notepad's default, to "All Files (*.*)" in order for the Open command to find the file.

   If all has gone well, you now have the file saved and ready to edit on your computer. This is a template which you can edit to create your own home page. In place of these silly images, you might put some digital photos, or images that you find on the web. In place of this rather dry text, you can use your own words and ideas.

4. The next step is to examine the document in Notepad in order to identify the HTML "tags" (or commands) in this page. You will want to print out the file, too, as it's often easier to work from paper than from the screen. Use the Print command (found under the File menu item).

   Examples of all of the following have been presented herein - can you discover the tags, or HTML commands, which do the following?

   Effect	Command
   create bold text
   create italicized text
   create a horizontal line across the entire page
   change the font to be very large
   create an ordered list of items, using capital letters
   create an ordered list of items, using numerals
   create an unordered list of items
   create a link to an email address
   create a link to a URL (another web page)
   make a line break (that is, force a carriage return)
   start a new paragraph
   add an image
   set the color of the page (and what color is it??)
   set the title of the page (and where does the title appear?)
   delineate (that is, distinguish) the two main parts of an html document
   cause a line of text, say, to be centered in the page
   start and finish an HTML document
   drop the font size by 1

5. Use your lab notebook as you try to answer the following questions:
   • Are there some tags whose purpose is unclear? Make a note of them.
   • Are there other tags than those mentioned above whose purpose you can discover? Make a note of them, too.
   • Do you know of some tags that we haven't seen here? What do they do?
   • What kind of image formats are used in this document? Do you know of any others?
   • What does "FFF8DC" mean? What does " " mean?
   • Is the HTML language "case-sensitive"? That is, does it matter whether I use the tag <b> or <B>?

6. Use Notepad to save the day1session1.html file as a new file called "index.html". Modify this page to create a preliminary home page for yourself and your partner. It should include many of the elements above:
   • A title;
   • A pleasing background color;
   • An image or two (or three, or four, ....), perhaps created using the digital camera (ask us to use it!);
   • Links to some pages of interest to you;
   • Some information about the page - that it's for the SEYS workshop, when it was made, etc.;
   • and whatever else you'd like to include!

In the afternoon session we'll refine our pages, and then put them onto the webserver (that is, the computer that will display the page to anyone on the web), so that they will be visible from anywhere and everywhere!

Notes:

Some of you may wonder why we don't use a more sophisticated web page design tool, and I'll give you several reasons:

• You don't necessarily learn the HTML language if you use them.
• They often produce very ugly, verbose code to do very simple tasks.
• Sometimes it's easier to do it yourself! And all you really need is a simple text editor like Notepad and your HTML vocabulary.