Teachers.Net - THE TEACHER WEBSITE! Teacher chatboards and teacher chat rooms, lesson plans and teaching tools, teacher job listings and career resources, reference desk and curriculum tools, everything for the on-line teacher!Click me
The Teachers.Net Website Handbook

Chapter Three - Text Editors and Viewing Source Code
In this chapter we will be breaking into the toughest part of web authoring, the source code. But don't get disheartened, if you look on the web there are a lot of web sites out there, and many that were even designed by children. By the time you finish this manual, you will be able to create handsome, well-designed web pages, and you yourself will become a web guru at your school! Teachers and adminisr=trators from across the district will hunt you down for advice on how to make web pages that look as good as your own!

When we talk about World Wide Web pages, one thing they all have in common is the "source code." They all are formatted by a very simple series of tags that make up the computer language called "HTML." HTML stands for "Hyper Text Markup Language." This is the ever-evolving language which tells your web browser "this word is bold text, this word is italics, this word is linked to the Whitehouse," and so on. Once you know the code you will be suprised how easy it really is to create web pages.

Lets take a look at some HTML right now. If you are viewing this page in a web browser, like Netscape, go into the "View" menu and select "Document Source." Netscape will pop open its handy Source Viewer, complete with fancy colored words and a whole bunch of little angle brackets. This is the source code, or HTML, that created this web page you're now reading.

Take a closer look at the angle brackets. You will see that they all enclose a group of words or letters, all seemingly very cryptic. The letters and words that are enclosed within the angle brackets are the commands which tell the browser how to display the text outside of the brackets. These snippets of code, along with the angle brackets enclosing them, are called "tags."

If you take a look at these tags, you'll notice that many of the appear in pairs. For example, at the very top of the web document, you will see this tag: <TITLE>, and a short time later its mate: </TITLE>. These tags are paired tags and must always appear together. When placed in the proper place in a document, the text they enclose will be the title that the web browser places in the top bar of the browser window. For example, the title I've created is "Teachers.Net Website Handbook." Nothing fancy at all!

Paired tags always begin with one, and close with the same tag, with the addition of a slash before the code. This is called a closing tag. Not all tags require a closing tag. for example, the <br> (line break), <hr> (horizontal rule), and <basefont size=3> (makes the standard text size 3, the default) all are single tags. Most of the others, though, do require closing tags, and will cause errors if you forget them. NOTE - some browsers are very forgiving! Just because Netscape allows you to forget your closing </b>, doesn't mean others will be so understanding!

Aside from these simple rules, there is just one more thing I need to say about placement of these tags. There are certain tags that must appear in certain places, or your webpage will cause problems somewhere down the line.

The following tags must appear in EVERY web document

The above is actually a webpage - if you copied and pasted this text into a fresh text document, you'd have a working HTML webpage. Take a closer look at the code above. Notice that case is generally not important with html tags. Also, a web browser will just ignore any blank spaces between elements of your page. Therefore, you cannot use spaces and line returns to format documents.

HTML is a "markup language," which means you use text code to "mark up" how you want the components of your document to appear. Placing bold tags around text, for example, will cause that text to diplay in bold in your browser. Other tags make text colored or different sizes, or aligned left or right, and so on. You can use HTML tags to call for images, quicktime movies, audio, and many other file types which can be displayed in your browser.

There is a limited set of text "tags" which are used to format web pages. Most of the tags are "paired" and when placed around text, these tags tell the browser to display the text in a special way. For example, using the bold tags (<b> and </b>) will make the text between them <b>bold</b>. Similary the <blink>blinking text<blink>, and so forth.

The entire HTML codeset is laid out in a suprisingly short and comprehensible guide from Kevin Werbach. Download and print out the Bare Bones Guide to HTML. This free concise desktop guide is all most people need to master HTML.

You can learn a great deal about the proper placement of web tags by visiting some of the better looking web pages and taking a peek at the source code that created the document. You can always view a website's HTML source code through your browser's "view source" command usually found in the file, edit, or view menu. You can even copy the text source code from exemplary websites and you'll have a fast and neat template for starting your own web pages!

TEXT EDITORS

Now we come to the part of the ride where you should really pay attention, because what you learn here can save you a great deal of time later. We're about to talk about picking an editor for creating your web pages, and since your web editor will be your weapon in the sticky world of web creation, you'd do well to pick one that works best for you.

Which type of editor you choose depends largely on what you want to be doing with your web pages and how much you need to know about this markup stuff. If you just want to create a personal web page with you picture and e-mail address, you can do this with any one of the WYSIWYG editors, like Claris Home Page, or Adobe's PageMill. These editors allow you to quickly create a document and get it on the web. Unfortunately, there hasn't been one created yet that knows exactly what you want, so you'll inevitably have to go in and edit the source code just a bit.

Straight text editors, on the other hand, allow you the ultimate control over the document's look, but the cost is you'll need to learn that dreaded HTML code. And how impossible it all seems to be able to read all of that stuff once you've created a huge document!!!

Actually, if you want to maximize your time, you'll learn to use both. The experts all seem to do this: throw something together quickly in a WYSIWYG editor (or quickly convert them from word processing documents) and then deftly tweak them into shape with a powerful text editor. So it looks like you'll probably want both a WYSIWYG and a straight text editor. SIGH...

But it's not as bad as it sounds. WYSIWYG editors, like Claris Home Page, are made so that you can use them even if you have never created a web page in your life. They have the look and feel of a hopped-up word processor, with the ability to easily (well...) insert photos and even sounds wherever you like!

Text editors, on the other hand, are the most basic of all programs you can imagine. they are as simple as a typewriter to operate, since all you'll be doing is typing words with them. The words will all be the same size, font, and style, so there is nothing fancy here. And all you'll need to do is know how and where to save the file when you're done, and we'll cover that in the next section! But you can do very well for yourself if you take the time to get a text editor with some advanced features to save you time in the end.

Some of the most important features are: advanced find and replace, text alignment options, and platform conversion features (like UNIX to DOS to MAC). These functions are all found in PlainText for the Mac, and TextPad for Windows.

Now that we have broken the surface of web page content, it's time to tackle the most important area of web page programming, the web page components.