Creating Your First Web Page


Mele Kalikimaka

Mele Kalikimaka!

scroll



Table of Contents
New Folder for Web Stuff
Saving a Background
Saving a Line Graphic
Saving a Photograph
Saving a Template
Finding Web Space
Uploading into File Manager
What Are All Those ?
Colors and Backgrounds
Email Link

Return to Izu Site Map

scroll

New Folder for Web Stuff

The first thing to do is to find some space on the hard drive of your computer for your web text document and graphics.

For Windows format:
At the lower left corner, click on Start, then Documents, then My Documents. Now click on File, then New, then Folder. A New Folder should appear at the bottom of the window. Drag over the words New Folder and type A Web Folder. (I use A so that this folder will be the first folder in the My Documents window.

For Mac format:
You could open a new folder on your desktop. Click on File, then New Folder. An untitled folder will appear. Click once on untitled folder to highlight it, then type A Web Folder.

At this point you may want to get a pencil and paper and outline an index for your web text documents and graphics. You can give each page a name, such as family, resume, etc. But I found that after a while I had additional family pages and I wanted everything alphabetized in my file manager. I then decided to use a letter and number combination. I used a lower case letter (faster to type since you don't use the shift key) and then began with with 01. I would skip some numbers to allow for future related pages. For example, your family pages could be numbered:

f01      family biography
f21Dad's resume
f22Mom's recipes
f23John's soccer team
f25Mary's poetry
f31Family Pedigree Chart
f41Dad's favorite links
f42Mom's favorite links
f51Elizabeth's birth announcement

Having skipped some numbers, I could now add a favorite links page for John and name it f43. In my own files, I wanted my English Regency pages to appear in the index before the family pages, so I numbered them d01, d02, etc. I wanted all my graphics after the web pages, so I assigned the following:

z001 through z050      backgrounds
z051 through z075lines
z076 through z100graphics
z101 through z200photographs

Return to Table of Contents


Saving a Background

Now you are ready to get put some files from cyberspace into A Web Folder.

Let's begin by saving (or downloading) a backgroud into A Web Folder. To copy this beige background, in the URL box, after http://toniaizu.home.netcom.com/ type z053.jpg over e08.html and hit the return key. You should see a small polynesian print square.

Now go to File, then Save As, be sure you are in A Web Folder (if not hold the black arrow down and scroll to the My Documents window), and click the Save button (or hit the return key).

I have some additional backgroups at:   Backgrounds, which you may download to A Web Folder. Remember to replace the y03.html in the URL by the zN.gif or zN.jpg and hit the return key. (N is the numeral.)

Now shortcut. Just place your cursor anywhere on this background, click the right button, click on Save Background As, be sure you are in A Web Folder, and hit the return key. If for some reason you are unable to use the shortcut, you at least know how to find backgrounds from other directories.

Return to Table of Contents


Saving a Line Graphic

Now you are ready to save a graphic. Place your cursor over the scroll, click the right button, click on Save Picture As, be sure you are in A Web Folder, and hit the return key. For additional line graphics, go to:   Line Graphics.

Return to Table of Contents


Saving a Photograph

Let's save a photograph. Place your cursor over Shaka Santa, click the right button, click on Save Picture As, be sure you are in A Web Folder, and hit the return key.

Return to Table of Contents


Saving a Text Template

The easiest way to make a web page is to create a text template.

For Windows format:
The HTML for this page will appear in a Notepad document. Go to File, then Save As and make sure that A Web Folder appears in the Save in box. Double-click on A Web Folder and in the File name box type the name for this web page. (I suggest a01.txt, until you develop some type of index code.) Then click on the Save button. After you upload this file onto your web space, rename the title to a01.html. If you change the title before you upload it, it becomes a web page on your hard drive and you will not be able to upload it to your file manager.

For Mac format:
Find the Simple Text application. It usually comes with your computer. Open the application, then go back to the browser and the site you which to copy. Go to View, then Source. Select All (Edit > Select All or Open Apple Key and A Key), then Paste (Edit > Paste or Open Apple Key and V Key) onto the Simple Text document. Then Save As and make sure that A Web Folder appears in the Save in box. Double-click on A Web Folder and in the File name box type the name for this web page. (I suggest a01.html, until you develop some type of index code.) Then click on the Save button.

Now you should have a background, a graphic, and a text document template text in A Web Folder.

Return to Table of Contents


Finding Web Space

The next step is to obtain your own personal "home" in cyberworld. Most ISPs provide space for their clients. There are also numerous companies that provide free web space in exchange for advertising. The ads may appear as a logo, banner, or pop-up windows. Some also provide free email accounts.

Free Web Hosting

Free Email Accounts and Web Space

The site I prefer is Netscape Site Central which contains no banners or pop-up windows, but a simple Netscape logo on the top of each page. They also provide 5 MB of free email space and 11 MB of free web space. For the purpose of these instructions, I will be using Netscape Site Central.

You may want to check out the various companies through the links above and then register with one of them. If you use Netscape, you will need to provide an email address in order to register. If you do not have one, I suggest Yahoo! Mail. They provide 5 MB of free email space.

Be sure to remember your user name, new email address, and password.

Return to Table of Contents


Uploading into File Manager

Now we are ready to connect your background, graphic, and text document template with cyberspace. Go to Netscape Site Central and sign in. A Site Tools with your user name site should appear. On the right side of the screen, click on File Manager. This is the site which you will be using to upload your files.

First the background... Click on the Browse button and find A Web Folder. Now double-click on z001, then click on the Import button. The site should disappear for a moment, then reappear with z001.gif in the larger window. To the right of that window, click on Preview and a light beige box should appear. Click on the Go Back button, which is centered just above, to get back to File Manager.

Next the line graphic... Click on the Browse button and find A Web Folder. Now double-click on z051, then click on the Import button. The site should disappear for a moment, then reappear with z051.gif in the larger window. To the right of that window, click on Preview and a scroll should appear. Click on the Go Back button, which is centered just above, to get back to File Manager.

Next the photograph... Click on the Browse button and find A Web Folder. Now double-click on z051, then click on the Import button. The site should disappear for a moment, then reappear with z101.jpg in the larger window. To the right of that window, click on Preview and a scroll should appear. Click on the Go Back button, which is centered just above, to get back to File Manager.

Next the html text file... Click on the Browse button and find A Web Folder. Now double-click on a01, then click on the Import button. The site should disappear for a moment, then reappear with a01.txt in the larger window. To the right of that window, click on Rename, then replace txt with html. Make sure the period is still between a01 and html amd click on the OK button. A window will appear (Changing the extension of this file may make it unusable. Do you wish to proceed?). Hit the return key.

The screen should disappear for a moment, then a01.html should appear in the large box. Click on a001.html to select it, then click on the Preview button. Then click on the link at the upper left corner. This is the URL for the web page you have created with a template.

Return to Table of Contents


What Are All Those ?

Now, that you have your first web page in cyberspace, it is time to go back figure out what is in the text document. I have several links to tutorials at:

HTML and Computer Resources

My favorite is:

Writing HTML

Since I could not do better, I suggest you now go to that web site and do the lessons. You could use a software program, but then you would not have complete control over the spacing and details of your web site.

Return to Table of Contents


Colors and Backgrounds

My favorite way to select text and link colors is to go to:

Color Center

In the upper left corner is a pull down menu with background in the box. At the bottom of the screen is a palette of colors. Click on any box in that pallette and the background will change to that color. There are two smaller boxes on the left of the palette, click on the bottom box and a gradient of colors will appear in the center. Click anywhere on the gradient to get a more specific color. On the left of the gradient a hue box appears and you can also click in that box to get a lighter or darker color. To go back to the large palette, click on the top of the two smaller boxes on the left.

After selecting the background color, go to the pull down menu and select Text. After selecting the text color, use the pull down menu to select Link. The color you select will be the color of any links on your site. Select a color for Active. I usually select a very bright color, as this color only appears while one clicks on the link. Then select a color for Visited, which is the color of the links that have been visited. It should be an opposite color to the one selected for Link.

As an exercize, in the first box, under the word Hex, type E3, in the box below that one, type D0 (numeral zero, not letter O), in the bottom box, type 9F. This was the color code that I found closest to the background on this page. If you find a better code, please send it to me.

Now, find some colors for your text and links. Then in the middle of the text on the screen, copy the entire color tag, which should be

where N is a number or letter. Now open your a01 text document in A Web Folder and near the top of the document, paste this tag over the tag:
and save the document as a02. Now upload that document into the File Manager, click on the renamebutton, then change txt to html. Preview it to see the new colors you have selected.

Colors vary from computer to computer, so I prefer to have gif or jpg backgrounds, then use color for text and links. I have links to other color and background sites at:

Color and Backgrounds

If you are going to use the fancy backgrounds, be sure to place the logo and link on your web site. It is only fair to give credit to those wonderful artists that created such lovely backgrounds, many with matching lines and buttons.

Also keep in mind that your web sites should be simple with not too many graphics. Not everyone has the latest fastest computer and browser. Complex web sites may crash on older computers.

Return to Table of Contents


Email Link

It is often nice to have a link to your email address on your web page. Open your a02 text document in A Web Folder. Near the bottom of the document, replace toniaizu@ix.netcom.com with your email address and replace Tonia Izu with your name. The First Web Page will appear in the subject line when an email is sent to you. Save this document as a03. Now upload that document into the File Manager and rename txt to html. Preview it to see your name, then click on your name and an email window should appear with already addressed to your email address and First Web Page om the subject line.

Return to Table of Contents




Please email any corrections, revisions, changes, additions, deletions, oversights, errors, typos, good ideas, bad ideas, new ideas, links, congratulations, adulations, optimism, pessimism, questions, clues, hints, events, notifications, or stories to Tonia Izu.
Changes last made on: Monday, April 23, 2007
This page accessed Counter   times since Tuesday, January 9, 2001.