The Internet is a large number of computers connected together by telephone lines, radio and satellite links so that they can talk to each other. It is sometimes called "cyberspace," because it seems like a place where a person can put information which can be read by other people. But the information in "cyberspace" actually consists of files on the millions of computers that make up the Internet. When you put a document in cyberspace, it actually goes on a computer hard disk somewhere. When you retrieve a document from cyberspace, you are actually reading from a disk in someone else's computer.

To use the Internet, you have to connect your computer to one that is part of it, called a "server." This belongs to a company called an internet service provider, sometimes called an ISP. The ISP server is connected to your computer by a special high speed connection or by TV cable or telephone lines using a device called a "modem." The connection and the modem are controlled by a program on your computer called a "client." Netscape and Internet Explorer are client programs. They are sometimes called "browsers." They automatically connect your computer to the ISP server and allow you to search for, look at, and download documents on the Internet.

The client can download any document if it knows what it is and where to look, but with billions and billions of documents, it is becoming increasingly hard to find what you're looking for. It has become easier with the World Wide Web, which assigns an address to each document so you can find it easily. It's also easy for document writers to let you quickly download other documents they want you to be able to find. One such address is that of NTScom, the ISP that owns the computer that this document is stored on. Their address is "https://www.ntscom.com/", but I rented space on their computer under the name "lindorfer.us" so that all my documents are addressed from "http://lindorfer.us/" or "http://www.lindorfer.us/."

The "http" tells your client program how to understand the information at this particular address. The "://www" part (if used) tells it how to look for it, and the "lindorfer.us" part tells it where it is. Actually, this address only gets you as far as NTS.com's humoungus hard disk, but the NTScom server has been told that if you use this address, you are looking for information about NTS.com and their services, so it puts a web page on the disk that pops up if you don't put anything else in the address.

Most ISPs set aside space on their hard disks for each of their customers. This space is identified by a directory name, such as "wizard." This directory works just like the one on your own hard disk. You can have subdirectories, files, and folders that can be accessed by their name, just as you usually do. If you don't supply the name of a particular file or folder, the server will supply one specified by the user of that space. For the space called "http://lindorfer.us/wizard," the name supplied is "/index.html." so if you go to "http://lindorfer.us/wizard," the document you will get is "http://lindorfer.us/wizard/index.html."

If you use an ISP, they probably have set aside space on their server for you. If you don't know what the address of it is, you need to call your ISP and find out, so you can put documents there. You will also need a client that can load your documents. The ISP can tell you which client to use and how to load the documents onto your server.

Making an html document is simple. The letters "html" stand for "hypertext markup language." "Hypertext" means that some of the information in the html document refers to other documents, or tells the client what the document is supposed to look like. The bits that refer to other documents are called "links," and clicking on them will automatically tell your client the address of the document to which they refer. They will also tell the client to load and display that document. Links look different than the rest of the text. They are usually a different color and are underlined, although your client can be instructed to display them in other ways. You may have already noticed the links on this page. If you click on them, they will take you to their referenced documents. You can get back to this document by clicking your client's "back" button, or, if the "back" arrow is dimmed, just by closting that document.

In the discussion that follows, we will develop a web page, and add hypertext bit by bit. Before each page there will be a link to the new document. Clicking on it will open it in a new window so you can see what the new hypertext does. Just close the example window when you're finished looking at it.

"Markup language" is a language that tells your client how to display the document on your computer screen or printer. The whole document, in hypertext markup language, is called the "source." The part that you see when you read it is called the "text." To separate the text from the source, html uses "tags." Each tag begins and ends with an angle bracket (< or >), so that your client knows that what is between the brackets is a tag and is not part of the text. The client reads the tags, which tell it what to do, and you read the text. To see the source document, you can click the "view" menu and select "source," and your client will display the entire source document. My source documents are mostly text, so they are pretty easy to read. Some source documents don't seem to make much sense at all, but your client understands them and knows what to do.

Some tags stand by themselves, some identify "elements," which are beginning tags and end tags and text or instructions between them.

To tell the client that a document contains hypertext markup language, the hypertext part has to have a beginning <html> tag and a end </html> tag. The client then knows that what is between the tags is hypertext that the client understands, not text you are supposed to read. An end tag usually looks like the beginning tag except it has a slash (/) in front of it. Tags can be in upper case (capital) or lower case (little) letters, it doesn't make any difference.

The simplest html document is just <html></html>. This tells the client that the file is an html source document, but doesn't contain anything. Click on it to see a blank document, that is, a html document that doesn't contain anything.

Every html document should have a head, which contains information about the document, and a body, which contains what is to be displayed. Both have beginning and end tags, so our document should really be <html><head></head><body></body></html>. This is still a blank document, because there's nothing between the tags.

It is a good idea to list tags vertically, so our blank document source should look like this:

<html> <head> </head> <body> </body> </html>

An html document should have a title. This is what shows up at the top of the screen that the client displays, usually after the name of the client. This is not necessarily the same as the name of the document, which is part of the address. Our document doesn't have a title yet, so let's add one. It goes in the head.

<html> <head> <title> </title> </head> <body> </body> </html>

We put the title in, but we didn't say what it was, so the client may display it as a blank title, that is, nothing, or it might display the name of the document on the server, which is not the same thing. Microsoft calls this a "feature," not a "bug" Let's title our document "Our First HTML Document" and click on it to see our blank document with this title.

<html> <head> <title> Our First HTML Document </title> </head> <body> </body> </html>

The document is still blank, but the title should show up at the very top of your screen. You may have to look around for it.

Now let's add some text, which goes in the body:

<html> <head> <title> Our First HTML Document </title> </head> <body> This is where the text goes. </body> </html>

Now we have a complete html document. How about that?

You have to format the text to tell the client how to display it. Sometimes you want to put line breaks in the text. This is done with the line break tag, <br>. There is no ending tag because the <br> tag stands by itself. We can put line breaks our document like this:

<html> <head> <title> Our First HTML Document </title> </head> <body> There once was a lass named Michelle<br> Who wrote things in HTML.<br> Her very first page<br> Was an accurate gauge<br> Of the skills that she wanted to sell. </body> </html>

There's no line break at the end of the poem because that's the end of the body, and we don't need it there. We can add spaces between the lines by putting in extra line breaks, like this.

<html> <head> <title> Our First HTML Document </title> </head> <body> There once was a lass named Michelle<br> <br> Who wrote things in HTML.<br> <br> Her very first page<br> <br> Was an accurate gauge<br> <br> Of the skills that she wanted to sell. </body> </html>

Every time it recognizes a <br> tag, the client will generate a line break. The spaces between tags are not necessary, but they are a good idea to make them easy to read in the source. Also line breaks are usually put at the end of the line because that's where you would expect to find them.

Usually line breaks are not used in large blocks of text because clients will have different sized windows. Some will display the block taller or fatter than others, and we would like to tell the client to wrap the text around to fill up the space in the window. We do want paragraphs, however, because otherwise the text would be displayed in one big glob and it would be hard to read. We could do this with two line breaks, but it's better to use the paragraph tag <p>.

<html> <head> <title> Our First HTML Document </title> </head> <body> "Most of all," Hook was saying passionately, "I want their captain, Peter Pan. 'Twas he cut off my arm." He brandished the hook threateningly. "I've waited long to shake his hand with this. Oh, I'll tear him!" <p> "And yet," said Smee, "I have often heard you say that hook was worth a score of hands, for combing the hair and other homely uses." <p> "Ay," the captain answered. "if I was a mother I would pray to have my children born with this instead of that," and he cast a look of pride upon his iron hand and one of scorn upon the other. Then again he frowned. <p> "Peter flung my arm," he said, wincing, "to a crocodile that happened to be passing by." <p> "I have often," said Smee, "noticed your strange dread of crocodiles." <p> "Not of crocodiles," Hook corrected him, "but of that one crocodile." He lowered his voice. "It liked my arm so much, Smee, that it has followed me ever since, from sea to sea and from land to land, licking its lips for the rest of me." <p> "In a way," said Smee, "it's sort of a compliment." <p> "I want no such compliments," Hook barked petulantly. "I want Peter Pan, who first gave the brute its taste for me." <p> He sat down on a large mushroom, and now there was a quiver in his voice. "Smee," he said huskily, "that crocodile would have had me before this, but by a lucky chance it swallowed a clock which goes tick tick inside it, and so before it can reach me I hear the tick and bolt." He laughed, but in a hollow way. <p> "Some day," said Smee, "the clock will run down, and then he'll get you." <p> <p> <p> <p> <p> <p> <hr> - "Peter Pan" by James M. Barrie,                                   available from Project Gutenberg at http://www.gutenberg.net/etext91/peter15a.txt </body> </html>

The <p> tags are part of the body element, and tell the client to put a paragraph break between the paragraphs, which it does. Unlike the <br> tag, which inserts a line break for each one, multiple <p> tags generate only one paragraph break, as shown by the multiple tags after Smee's statement, "and then he'll get you."

While we're on the subject of paragraphs, we should probably also mention spaces. Most clients read a consecutive number of spaces as only one, as shown by the large number of spaces after "James M. Barrie," in the source, which is displayed as only one space by the client. This is a useful feature because sometimes the source document gets complicated and we would like to put in lots of space between elements to make it easy to find them, even though we don't want the text to have all that space in it. Displaying only one space in the text regardless of how many there are in the source allows us to do that.

The <p> tag differs from a paragraph symbol (¶) which we put in the source document to make it easy for us to read the source. Most clients will put a space where they see a ¶ if nothing else goes there, otherwise they usually ignore it. It is always a good idea to make the source easy to read using paragraph symbols. This makes it easy to edit your source document later.

You may have noticed the line separating the text from the reference at the bottom. That is called a horizontal rule, made with the <hr> tag. Like the <p> tag, it doesn't have a beginning or an end. The client will know how long to make it.

Text can be formatted many different ways. We can make it bold or underlined or italic by using the <b> </b>, <u> </u> and <i> </i> tags, respectively. We can make the text look like it was typed on a typewriter or teletype by using the <tt> and </tt> tags. The text appears to be crossed out by using the <s> and </s> tags. Subscripts are made using the _and tags, while superscripts are made using the ^and tags. The <big> and </big> tags will make the text one font size bigger, and the <small> and </small> tags make it one font size smaller. In all cases, the formatted text goes between them. We need beginning and end tags to show where to start the formatting and where to end it. Look at this:

<html> <head> <title> Our First HTML Document </title> </head> <body> "Some day," <small>said Smee</small>, "the clock will run <sub>down,</sub> and then <i>he'll get you</i>!" <hr> - "<b>Peter Pan</b>" by James M. <s>Barry</s> Barrie, available from <u>Project Gutenberg</u> at <tt>http://www.gutenberg.net/etext91/peter15a.txt</tt> </body> </html>

We can also change the size and color of the text. If the hypertext doesn't tell the client what size and color to use, it will pick one, determined by its "preferences" setting. If the client allows it, the hypertext can override these settings. The <font> </font> tags do this. These tags have various attributes, such as color and size, which are the only ones we'll discuss. Colors such as red, green and blue are pretty universal, but many clients also recognize colors such as beige and goldenrod. You can also invent your own colors such as slime or bridesmaid, but there's no guarantee what they will look like. Here are some colors and other formatting.

<html> <head> <title> Our First HTML Document </title> </head> <body> "I have often," said <font color=blue>Smee</font>, "noticed your strange dread of <font color=green>crocodiles</font>." <p> "Not of <font color=green>crocodiles</font>," <font color=red>Hook</font> corrected him, "but of that one <font color=green>crocodile</font>." He lowered his voice. <font size=-2>"It liked my arm so much, Smee, that it has <i>followed me ever since</i>, from sea to sea and from land to land, licking its lips for the rest of me."</font> <p> "In a way," said <font color=blue>Smee</font>, "it's sort of a compliment." <p> <font size=+2>"I want no such compliments,</font>" <font color=red>Hook</font> barked petulantly. "I want <font color=gold>Peter Pan</font>, who first gave the brute its taste for me." </body> </html>

One quick and dirty way to display text in the body of an html document is to use the <pre> </pre> tags. These tell the client to use the text formatting information it would otherwise ignore, such as ¶, to display it. The Government uses this method to quickly convert their filed documents to html. This sometimes produces weird results, including changing the displayed letters to monospaced, as if you had used the <tt> tag. This is considered cheating. If you want to make an html document, make an html document. Not like this.

<html> <head> <title> Our First HTML Document </title> </head> <body> <pre> There once was a lass named Michelle Who wrote things in HTML. Her very first page Was an accurate gauge Of the skills that she wanted to sell. </pre> </body> </html>

Note that we left out the <br> tags, but the client displayed the poem anyway because it used the ¶ marks, which it would otherwise ignore. It also changed the font to monospaced type.

Finally, we can make headlines or text that stands out by using the <hx> and </hx> tags, and center our text by using the <center> and </center> tags. The "x" indicates a number in the headline. One is the largest and larger numbers make the headline progressively smaller, just to confuse things. Look at this example:

<html> <head> <title> Our First HTML Document </title> </head> <body> <center> <h1> The Lass Named Michelle - by John Lindorfer </h1> There once was a lass named Michelle<br> Who wrote things in HTML.<br> Her very first page<br> Was an accurate gauge<br> Of the skills that she wanted to sell. </center> </body> </html>

I probably shouldn't tell you this, because it may make you lots of enemies. There is another element that some people love and others just HATE! It's called the "blink element," because it makes the enclosed text blink. It is basically a Netscape feature. Look at this example: (If your client is a Microsoft product, it may not blink. Bill Gates hates it that much!) If you use the blink element, don't blame me if bad things happen to you.

<html> <head> <title> Our First HTML Document </title> </head> <body> <center> <h1> The Lass Named Michelle - by <blink>John Lindorfer</blink> </h1> There once was a lass named Michelle<br> Who wrote things in HTML.<br> Her very first page<br> Was an accurate gauge<br> Of the skills that she wanted to sell. </center> </body> </html>

Authors sometimes forget the end tags in elements. This results in all the remaining text being formatted up to the end of the document. If this happens to you, look for the place where you forgot the end tag and put it in.

We are now ready to make an html document of our own. The easiest way to do this is to use a program that makes them automatically, such as Netscape Composer, but that won't teach us anything, and will probably put in information that we don't really need. This will make the document longer and take proportionately more time to load and more space to store. To learn how to make a web page, first download our empty example by clicking on our first complete html document. Save this as a source document on your desktop. It will probably be named "Our First HTML Document," but your computer may name it differently.

The name doesn't matter because you need to change it to "MyHTML.txt" and save it as text. Then launch your word processor and open the text file. It should look like the example below. If it doesn't, e-mail me with as much information about what you tried to do and what went wrong as you can and "Please help me with my HTML page" in the subject line and I'll try to do that.

<html> <head> <title> Our First HTML Document </title> </head> <body> This is where the text goes. </body> </html>

Now change "Our First HTML Document" to "MY First HTML Document" in the text and "This is where the text goes." to anything you want. I would suggest something simple to start. Later on, you can experiment with paragraphs and formatting and colors and suchlike.

When you're done, save your document as a text file and then change the name to MyHTML.htm. Then open it with your client (browser). It should show the title, "MY First HTML Document," in the title space, and whatever text you put in the text window.

You can do this over and over again by adding, and changing things. You can see what the source code looks like by opening the view menu of your client (browser) and choosing source.

Macintosh users with older word processing programs won't have to change the names. They can just save with one program and open it with another. They can have it open in both programs at the same time to edit with one program and view changes with the other. Bill Gates and his Microsoft buddies thought you would like to go through the extra steps with the newer, more expensive programs. This is one of the many features you paid all that money for.

In the next lesson, we will learn how to make links and add pictures. Click here to go to it.

Have a nice day.

John Lindorfer