Evaluation of Educational Technology

"But I Don't Wanna Learn HTML! I Just Wanna Make Web Pages!"

Well, you could do that. You could just use an HTML editing software and never learn any of the coding that goes into making a web page. But I wouldn't recommend this strategy for a variety of reasons:

Knowing HTML Will Enable You To Take Better Advantage of HTML Editing Software. Trust me on this: understanding HTML is invaluable to understanding HTML Editing Software. What it boils down to is HTML editing software is a lot like many computer things "made easy:" It's really only easy if you know what you're doing ahead of time. A little HTML knowledge can go a long way with this software, but if you don't understand HTML at all, you might be lost with most of the decent editing software.

HTML Editing Software Offers A Lot Less Control. While helpful, HTML editing software tends to arrange things in some strange ways sometimes. The result is it's easy for those who don't know HTML to make errors that they have a hard time fixing.

"Raw HTML" Is Available Everywhere. The only software that you need for working with HTML is SimpleText (for the Mac) or NotePad (for the Windows PC). Now isn't that easy?

On To Learning HTML

Before going too far, you might want to print this page out. It's usually easier to follow the instructions if they're on paper first...

The first thing to remember is that all web pages are just plain text documents with some coding in them--Hypertext Markup Language, or HTML. HTML isn't actually a computer language per se; rather, it is a coding system that uses basic commands to effect text, graphics, and the like on web pages.

HTML has a few very basic "grammatical rules" that are fairly easy to understand:

Everything between the "less than" and "greater than" signs , "<" and ">", are the HTML commands. Most people who do HTML refer to these as "brackets."

End commands usually include a "slash" or "/".

Take a look at this example:

<title>This is the title command</title>

You might not know yet what the word "title" that appears between the brackets (though you can probably guess), but you can be assured that this is some sort of HTML command. Further, the item in the brackets that includes the slash is the one that "turns off" the command. In other words, the <title> is the beginning of the command; the </title> is the end of the command, sort of like a period in a sentence.

With HTML, writers write text and include codes for other things to happen-- links, graphics, etc. All of this may look complicated at first, but it's actually quite easy. In fact, one of the reasons why the web has grown so quickly is that HTML is easy enough to be learned by folks with some computer experience but no real programming experience. Here's how it works:

Step 1: Type this text EXACTLY as it appears below using SimpleText:

<html

<head>

<title>This is the title of a web page</title>

</head>

<body>

<h1>Welcome to the super simple web page</h1>

Here's some plain text.

<p>

Notice how there is a space separating this sentence from the previous one? It's because of that p in brackets.

<p>

Pretty neato, huh?

<p>

</body>

</html>

Be careful about this! Typos could cause this to not work!

Another thing to keep in mind is that this doesn't work well in using word processors like Word or Word Perfect or whatever because word processing programs actually put in some invisible codes that confuse web browsers. Just about every personal computer will have something like SimpleText or NotePad, so for our purposes here, stick with them.

Step 2: Save this file as "test.html" or as "test.htm"

Most older PCs will require you to save it as "test.htm". If you are doing this exercise in a computer lab, save this to a diskette or zip disk. It's really important that you remember where you save everything; when things don't work, it's usually because files get saved in the wrong place.

Step 3: View your file in your browser.

To do this with Netscape, look under the "File" menu and (depending on the version of Netscape) select the "Open File..." or the "Open Page..." option. This will open a menu option like the one you get when opening any file from an application. Find the file you just saved ("test.html" or "test.htm"), and open it. With any luck, you'll get the beginnings of your web page.

If it worked, congratulations! You're halfway there!

Making Links

Links to other documents are what makes the web go 'round and it's quite easy to do. Here's the basic command:

<a href="http://www.sunysb.edu">The SB Homepage</a>

The part in the quotes, "http://www.sunysb.edu," is the URL or "address" of the web page to which you want to link. You can link to literally any page on the Web from the page that you are making, which is one of the key things that has made the Web the exciting hypertextual forum that it is. The part that says "The SB Homepage" is what will show up as a link when you look at this file in a web browser like Netscape of MS Inernet Explorer. The "</a>" part is important because it is a command that indicates the end of the link.

Try inserting a link command into your "test.html" file. Just remember that it's got to come in the main body of your web page, which is any of the places between the commands <body> and </body> Once you've inserted the link, save your file again so it will remember the changes and try to look at it on the Web. (Frequently you might have to push the "reload" button to make the changes show up though). It should show up somewhere on your page looking (and working) like this:

The SB Homepage

Inserting Graphics

There are two basic ways of getting graphics for your web site. You can make them (and this is frequently accomplished with software and/or a scanner) or you can download graphics from other sites. Making your own graphics is a more advanced step-- for the time being, let's start with downloading something. You can download graphics from the web simply by putting the pointer of your mouse over the graphic you want to download and holding down the button. When the menu item comes up, select "save graphic as..." and save the graphic below in the Student Folder (or on your zip or floppy disk) as "dalitimewarp.gif" On a Windows PC with two mouse buttons, this is accomplished by using the second button on the mouse, the one you don't usually use to click with. A word now about graphics like this: there are a variety of copyright and other issues that you should be aware of before you go out and randomly "borrow" graphics. You can read about this as you progress through making web pages, but for the time being, realize that you shouldn't just take anything. This particular image came from one of the many free sources for clipart on the web.

Okay, having said that, take this graphic:

Make sure that you save this graphic as "dalitimewarp.gif" and in the SAME PLACE as you save your HTML file.

Now, to make this graphic show up on your web page, insert this command somewhere in your site:

<img src="dalitimewarp.gif">

The "dalitimewarp.gif" part is where you would put the name of the graphic file you want to insert. Any graphic file that you download from the Internet should work for this command; for graphics that you create, you need to make sure that you save them in either "gif" or "jpeg" format.

To see if this all worked, do what you've done twice before: save the HTML file (and remember where you saved it!), open the HTML file in Netscape, and see what it looks like.

Basically, That's It For the Basics

No, really! If you can a) type up you text, b) add a few basic formatting commands, c) link to other documents on the web, and d) insert a few graphics here and there, then you can make a simple and satisfying web page. Oh sure, you'll want to do more, but this is plenty to get yourself started.