Griffith Feeney
Senior Fellow, East-West Center
29th Summer Seminar in Population
It's as easy as 1-2-3 ...
- Get a computer with an internet connection
- Create a web page
- Install and configure a web server
You already have a computer with an internet connection in front of you, so we're done with step 1. We will go through steps 2 and 3 together, with you carrying out each step of the process as I explain how it's done.
Creating a Web Page
By a “web page” we mean an HTML document, which is a text file containing some “content” that you provide and some “markup” that tells the computer (or people, if they know how to “read” HTML) things about this content. Don't worry if you don't know what "text files" means. I'll explain later, and you don't need to know right now.
HTML stands for “hypertext markup language”. “Hypertext” refers to text that contains “links” that enable you to jump from one document to another, with documents potentially located on any one of millions of internet-connected computers throughout the world.
1. Create and Save a (very) Simple Page To create your first web page, being by opening your favorite text editor. If you don't know what a text editor is, never mind, just go the Windows 95 Start button, click it, then click Run (toward the bottom of the pop-up menu), then type “notepad” in the space provided, then click OK.
This will bring up an “Untitled - Notepad” window (you'll see that designation at upper left against, probably, a dark blue background). You'll create your first HTML document (the same thing as your first web page) by typing things into this window and then saving the file under a suitable name.
Begin by typing <html> on the first line of your nascent file. Now space down a few lines and type </html>. Now save the file with the name “"index.html” in a directory where you'll be able to find it when you need it. If it were me, I'd put it in my c:\temp directory, and make sure this temp directory isn't cluttered up with other files from previous projects.
I assume you know how to go to File, then Save As, then navigate to the directory of your choice, then specify the file name, then Save. If you don't, see if your neighbor knows how. If that doesn't work, ask me.
Now type <body> a line or two below <html>, space down a few lines, and type </body>. You document should now look something like this.
<html>
<body>
</body>
</html>
Next, type anything you like between the <body> and
</body> “tags”, as they are called. If you can't think of anything else, type “Hello, world!”. You'll probably want to type this without the quotes, though you can include them if you want. Then save the file. If you don't save, you won't see the results of your changes when you want to.
You've nowcreated an HTML document, but so far you've only looked at it as a text file, with all the markup showing. The next step is to see what it looks like in the Navigator browser.
View the Page in the Navigator Browser Open Netscape Navigator, if it isn't already open. Don't close Notepad! You'll want to keep both Notepad (or your favorite text editor) and Navigator open all the time from now on, because you'll be constantly going back and forth between them.
You'll make life easier for yourself if you take the time now to size and place the Notepad and Navigator windows conveniently. I like each window big enough to fill all but an inch or so of the available vertical space and two inches or so of the available horizontal space, with the windows overlapped by an inch or so.
Okay, now you've got both Navigator and Notepad open in their respective windows, right? And you can go back and forth between them either by clicking on one of the windows to make it active or by using the Alt-Tab keyboard shortcut. Right? If in doubt, speak up, because you'll be lost shortly if you don't have this set up and know how to switch back and forth between windows. We'll spend five or ten minutes explaining (me) and practicing (you) if necessary.
So, go to the Navigator window and open your newly created document in it by doing File > Open Page > Choose File, then navigate to the directory you saved your index.html file in, select it, and click Open, then Open again. It's tedious, I know, but you only have to do it once in this session.
What do you see? How does it compare with what you see in the text editor? Any surprises? These are not rhetorical questions!
Add More Content Now let's add to the content of the document. In Notepad, type several sentences separated by blank lines (i.e., press the Enter key twice after entering each sentence). Or, if you're lazy (some people say is a virtue in a computer programmer), copy and paste some text from something else you're working on.
Switch back to Navigator and reload the document. What do you see? How does it compare with what you expected? Is this satisfactory? Why or why not?
The browser is programmed to treat all “white space”, meaning any combination of consecutive blanks and tabs, as a single blank space. To make the browser display your paragraphs as paragraphs you have to enclose them in paragraph tags, like this.
<p>stuff in one paragraph</p>
<p>stuff in the the next paragraph</p>
Actually, because the beginning of one paragraph necessarily marks the end of the previous paragraph, the end tag here is usually unnecessary and can be omitted. So you can just type <p> at the beginning of each of your paragraphs and not bother with the corresponding end tag, like this.
<p>stuff in one paragraph
<p>stuff in the the next paragraph
Now you can make paragraphs. Big deal. You've been able to do that in your word process from the very beginning. So let's go on to what's most distinction about HTML—hypertext links.
Adding a Hypertext Link To make a hypertext link you need to three things.
- a document to link to
- knowledge of the necessary HTML syntax
- text in your document that will “connect to” the linked document
You can link to any document you want, but you need to know it's internet “address”, or URL, which stands for uniform resource locator. Probably you have lots of URLs just floating around in your mind, but in case you don't, use this one to learn how to do links: http://www.demographer.com. Note that the final period in this sentence marks the end of the sentence only; it is not part of the URL.
Now switch back to Notepad and enter the following on a blank line somewhere between the start and end body tags.
<p><a href=http://www.demographer.com">My first link</a>
Don't worry about what this means for now (we'll get to this in a minute). Save the document, switch to the browser, and reloaded it to see the result of this most recent edit. What do you see? What happens when you click the link? Do you know how to get back to your document? A(nswer the last question: click the "Back" button at upper left.)
2 Adding a Title Switch back to Notepade. To add a title to your document, type the following after the html start tag and before the body start tag.
<head>
<title>My First HTML Document</title>
</head>
You can of course enter any title you want between the title start and end tags.
Now save, switch back to Navigator, reload, and look to see what has changed. Did anything change? Look closely, and look everywhere on the Navigator window.
There's no change in the content of the window, but if you look at the title bar of the Navigator window you'll see whatever you typed between the title tags there. Navigator reads this information and displays it in the title bar of the window.
Note that putting something between the title tags in the header does not put a title at the top of your document—as you might expect if you didn't know as much HTML as you now know. We'll see shortly how to put a title at the top of your document.
Now let's talk a bit about what we've done. Get out of learning-by-doing mode for a few minutes and get into learning-by-listening mode.
Every HTML document begins with an HTML ’start” tag and ends with an HTML “end” tag. Note the format. Each tag is enclosed in angle brackets, <...>. The start tag encloses a sequence of letters. The end tag encloses the same sequence of letters preceded by the slash character, “/”.
Every HTML document consists of various kinds of “elements”. The highest level elements are the “body” and the “head” elements. Why is the “head” element necessary? Why can't we get along with “body” only?
Because in addition to the content of the HTML document we (often) want to provide further information about the document, information that will not be displayed in the browser window, but that will be available to the browser and other programs that process the file. The simplest example of this is the document title. Another very common and important example is indexing information used by web search engines such as HOTBOT.
We want all our HTML pages to have a title in the head, but from now on we'll concentrate on content in the body of the document.
Secrets of Successful Web Sites
<gfeeney@gfeeney.com>
