Chapter Two

What are we really seeing when we look at a webpage?

If we're looking at it in a browser, like Netscape or Internet Explorer, we see text, images and buttons - artfully arranged and sometimes even animated. We've learned from experience how to recognize that a bit of text is a link to something else - either from context or because it's underlined. But is all that what's realy there?

Nope. None of that is real.

i. Markup vs. Programming Languages

There are two basic types of computer languages. Programming languages, such as Basic, C++, Pascal or Java, are written in something that only vaguely resembles plain English. The terms are confusing, with numerous odd symbols given special meaning and very specialized syntax. They start out looking something like this:

class VectorBenchmark
{     public static void main(String[] args)
      {     Vector v = new Vector ();

            long start = new Date().getTime();
            for (int i = 0; i < MAXSIZE; i++)
                 v.addElement(new Integer(i));
            long end = new Date().getTime();
            System.out.println("Allocating vector elements: "
                 + (end - start) + " milliseconds");
      }
}

...and so on. Then they're compiled into machine language, a long string of binary 1's and 0's. They tell the chip in your computer what to do, and all software is written in one or another of these languages.

Then there are markup languages, like HTML. They aren't compiled for the chips to use, but are simply a set of instructions in more or less plain English, and are used to tell browsers and other software how to format and present text, images, audio, animations and other data. That makes them a whole lot easier to learn and use.

Learning a programming language is like learning a foreign language, lots of memorization, lots of studying, and years until you're really fluent. Learning a mark-up language is like learning Pig Latin. Ifay ouyay etgay ethay asicbay icktray, ethay estray isay ustjay acticepray.

Over the course of these lessons you'll learn the basic HTML tags that tell browsers how to format text, display images and shape webpages. We'll talk about content vs. form, types of images and when to use them, animations, audio files, hyperlinks, forms, frames, and how to find a web space provider, upload your pages, and publicize them.

ii. Display vs. Source

Web pages are built with Hypertext Markup Language, or HTML. This means that when we write a web page, we're writing a set of instructions for the browser. Think of it like written music. On a piece of paper music is written using a specialized set of symbols that tell a musician what notes to play and how to sing the words. HTML tells a browser where to put our text and pictures, and how they're supposed to look.

What we see in the browser is the Display and the HTML that the page is written in is the Source. The browser looks at the Source and interprets it, just like a musician looking at a page of sheet music. The HTML is interpreted, and our page Displayed in the browser window, just like the muscician sight-reading the music and singing the correct tune.

This means that we can always look at the Source of a page to see how it was built. It's like being able to look inside a building and see the architectural drawings.

iii. File Types

Computers aren't very smart. A person can look a piece of paper and instantly see that it's composed of text - letters arranged to make up words - or is a photograph of your cat. Computers, on the other hand, store everything in binary - long strings of 1's and 0's - so they can't immediately tell if a file is supposed to be that letter to your mom or a picture that you'd rather mom never saw.

So we had to come up with some way to tell computers what to expect when they opened a file. These are called file extensions. These are a three or four letter abbreviation that comes after the file name. For example:

• myname.doc
• myname.txt
• myname.html
• myname.jpg
• myname.psd

These files all have the same name, myname, but different file extensions. They are separate files, containing different stuff, and your computer will know what is inside them and what program to use to open them from the file extensions. Some of the more common file extensions include:

.doc

A Microsoft Word document. Contains text and formatting, such as page margins, bold, line spacing, indexing, etc.

.txt

A Plain Text file. Contains only text, with no formatting.

.html

A Hypertext Markup Language file. The file is actually made up of plain text, but this file extension tells your computer to open this with a web browser such as Netscape Navigator or Internet Explorer and interpret the contents as HTML.

.jpg

A Joint Photographics Expert Group file. This is one format for saving pictures for the web. It works best with photos (because it was created by a bunch of photographers).

.psd

A Photoshop Document. Another image format, used with Adobe Photoshop. This contains the image you are working with, plus layers, editable text, effects, etc.

Some computers are setup so that these file extensions are hidden from you. This is an attempt to protect you from learning too much about how your computer actually works. If you can't see file extensions on you computer, start by double-clicking on the My Computer icon on your desktop. From the window that opens, select View-Folder Options. On the window that opens, click the tab labeled View. This will give you a long list of options. There should be one that says "Hide file extensions for known file types". Uncheck the box next to this option by clicking in it. Then click the button at the top labeled Like Current Folder, and the button at the bottom labeled OK. This will allow you to see the file extensions.

Why do you need to know about file extensions? Because each program, such as Microsoft Word or Word Pad, has a favorite file type. We're going to be working with .html files. The .html file type is unusual in that it can be created and edited as a text file, and will display in a browser as an HTML file. So we will be editing these files in one program, but looking at them in another.

iv. Coding

This class will teach you how to hand write code for webpages. You could go out and buy FrontPage or PageMill, but this is every bit as easy once you learn the tags, and gives you much greater control.

Hand coding is simple. All you need is a plain text editor like Wordpad or any other word processing program that can save plain text files with no formatting as .html file. Word or WordPerfect will work, but I usually use Wordpad. Wordpad can usually be found under Start-Programs-Accessories.

First download the template file. This will open up in a new window. Save the file to your desktop, as a plain html file. In Internet Explorer, you can do this by going to File and choosing Save As... You can download the template.html file by clicking here, or you can download this whole tutorial as a zip file by clicking here.

Once you have the template file saved to your own computer, open Wordpad and use it to open the template file.