Freelance Writing Jobs | Today's Articles | Sign In

Teacher's Net

Lesson 7: The Virtual Classroom, Part One

The HTML Editor

A note about HTML Software

In the early days of websites, developers used very simple HTML editors- the simplest one being Microsoft's standard "Notepad" program. Some purists still adhere to this approach, but those of us who simply don't have the time to learn years' worth of coding just to put up a website to help our students will find little use for this type of editor.

Enter the "WYSIWYG Editor"- meaning, literally, What You See Is What You Get. Instead of compiling a bunch of code and hoping for the best when you go to preview it, you can see how it looks as you go along. There are three main WYSIWYG editors: Microsoft FrontPage, Macromedia Dreamweaver, and Adobe GoLive. An overlooked editor of HTML, though, is Microsoft Word.

What it all comes down to is what you feel comfortable with. Using FrontPage, you can likely find a host that allows you to use FrontPage extensions (all the neat little things like forms, etc.), but these likely cost quite a bit. However, Dreamweaver and GoLive- while the best, cleanest, and industry-standard programs- have a very steep learning curve that doesn't suit us in this compact class.

In the interest of remaining true to the idea that it is easy to use technology in the classroom, I've decided to implement this plan: We will be editing our websites almost solely in Microsoft Word. The only exception to this (and to expose you a bit more to HTML coding) will be the installation of scripts. To install scripts, we will open our html documents in Notepad.

The HTML Aspects of Microsoft Word

Most of us have used Microsoft Word for at least a thing or two. Likely, few of us have used it to create HTML, though.

A couple of the things that Microsoft Word helps us do more easily than any other program include the creation of a linked "Table Of Contents" that will guide your reader through the page much more easily, and an easy creation of hyperlinks. We'll go through the actual "how-to's" in the next lesson, as we begin compiling and editing.

When we get going, though, it is a good idea to know what to expect. So, a quick lesson? Right-click here and choose "Save Target As". You will be saving a zipped Word document that guides you through the process of saving html from Word- and you'll use the process to convert this document into html. Pretty easy, all-in-all, and it'll show you how Microsoft Word breaks down the input of pictures, links, etc. into a folder and a file. It should take less than 10 minutes.

A Quick View of HTML in Notepad

HTML is a language all of its own. While many of the words you see look like common English, there are a ton of phrases and characters that are unique to this language. Most of them are things we don't need to worry about- but when we open up our documents in Notepad, we'd like to have an idea of what we're looking at, right?

When you started looking at the java scripts, you probably saw directions that said "Place the following in the HEAD of your page" and "Place the following in the BODY of your page". Does this mean anything?! Of course.

Every web page begins with text that looks something like this:

course template

Everything between and is considered as being the "head" of your page. Below the "head", you see a version of the following text:

Some sort of text will be in here.

Since the only time we're going to be looking at the html, in this course, is for the installation of scripts, it's important to make this distinction between the HEAD and BODY...

When a script instructs you to place a series of code in the HEAD, it doesn't matter where you place it in the head, as long as you don't interrupt any other coding. Just hit "Enter" before the last tag, and you'll be fine to paste your code in.

When a script instructs you to place a series of code in the BODY, though, it does matter where you place it in the body. Wherever you paste the code in the body is exactly where the script will show up. So make note of this, and when you know that you'll be placing a game, for instance, on your web page, mark its place by something like ***GAME SCRIPT HERE*** so that you know exactly where to put the body script.

Go ahead and right-click your html document that you converted earlier. Choose "Open With... Notepad". Take a minute to locate the and tags, just so that you're familiar with how it will look.