... HTML & Webpages ...

... Recommend this series to a friend.

STARTING OUR WEBPAGE

First we'll delete what we see in the editor window now so that should GeoCities change their default format, you and I will still be in sync with each other following the instructions on this page. Highlight the contents of the editor window by right clicking in the window, click "Select All" (or hit the "A" key on the keyboard), and then Delete.

I find which technique I use depends upon the type of work I'm doing. This is true in all of computer work (or life in general). As they say, "there are many trains that go to Chicago" … which you use depends upon where you are coming from. Now why anyone would want to go to Chicago; that's another question.

Now with an empty editor window we return to that template we saw. I'm not going to discuss in any way the "DOCTYPE" tag (the first one you see below). I'll assume you will always keep it on top of your editor. Our discussion will start with the html tag. I'll post it here again for you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

From now on, the "DOCTYPE" tag will be omitted in our examples; you will keep in on top in your editor. Again, how to copy/paste:

  1. Place your cursor at the beginning of <HTML>, left click the mouse, hold it down, and slowly sweep it across and down to the end of the </HTML> tag. Now either Ctrl+C or right-click on that selected (highlighted) section and click Copy.

  2. With cursor in the editor window, right click, Select All, and either Ctrl+V or right click and click Paste.

The tags should now appear in your editor window. Learn to proofread; every dot and dash has to be exactly as prescribed, especially if typing the tags. Once you know it is correct, we proceed to placing some text on your new webpage keeping in mind that this is your opening page and should give some indication of what your website is all about.

Be especially careful about not accidentally deleting any part of the html tags. You miss one dot, dash, bracket, or insert one unnecessary space, and the page takes on an entirely different look than the one you expect. And that's when a different kind of fun starts; searching for the error. With experience, this search doesn't take long; upon seeing the page you know exactly what and where the error is.

  1. On top we already have the <HTML> followed by the <HEAD> tag.

  2. Between your TITLE tags place a title to your webpage. This will not be seen in the window of the webpage but will be in the title bar of anyone's browser. This title will also be in the taskbar button and it will also be picked up by certain search engines.

  3. Below the title tags is the closing </HEAD> tag, and below the </HEAD> tag is the <BODY> tag.

  4. Now we give the page a heading that WILL be seen on the window of the webpage. It will be seen as a heading of whatever font, color, and size you choose. For now we'll let the browser choose the font and color and we will just choose the text and the size of font (letters). We will also center the text using the <CENTER> tag (just for starts).

Want to start your webpage with a heading? Here's the tag (but it has to be given a number) … <H>, and make sure you end that heading with a </H>. The heading tag comes with numbers: <H1> through <H6>.

The numbers beside the H tell the browser how large the letters are to be, with <H1> being the largest and <H6> the smallest. So what do your want your heading to say? Lets suppose it's "My Webpage" (sans quotes). You might want to substitute you name for "my" but in the possessive form (your name with an apostrophe 's). So far, this is what you should have in your editor:

<HTML>
<HEAD>
<TITLE>My Webpage</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Greetings from the Land of Oz</H1>
</CENTER>
</BODY>
</HTML>

  1. The html tag tells the browser what to expect; it's not just an ordinary document.
  2. The head tag encloses the title tags; later on you will find other features that go into the head tags.
  3. The title tags enclose the title that will be on top of the browser and in the taskbar.
  4. The body tags enclose the content of the page (text and pictures).
  5. The center tags keep whatever is between those tags centered.
  6. The heading tags regulate (depending upon the number within it) the size of the heading.

After proofreading your work carefully, press the Preview button and see the results of your work. Might not be much but you now have the foundation of a webpage. If you like what you see so far, click Save and Continue. Now that it's saved, you can see what it looks like on it's own webpage. Do the following:

Click the link, "index.html" next to where is says "Filename:" near the upper left hand corner. This opens your page on a second browser with the URL (that's the webpage address on the internet) exactly how the world will see it. Not much but it is still mighty pretty (and it's yours).

Is there more to do? Well, from here we can give your background and your font some color. We'll make sure they don't interfere with each other and making sure they don't blend into each other; you would never want a black background with a dark blue lettering. These precautions will all take experience; I think some of my pages might still be outrageous in appearance.

And we continue on the ... Next Page … adding color to the page.

We return to the … Table of Contents … enjoy your work.

And if anything to add or correct - - I certainly would appreciate it.

Return to ... Navigator ... that's it.

1