Home

Building a Website the Easy and Simple Way.

Lesson A,
Setting Up Your Computer For Website Development and Offline Viewing.

Table of Contents.

Introduction and Justification.
Setting Up Your Computer For Website Development and Offline Viewing. You are here.
Getting Started, Your First Webpage.
Inserting a graphic, image, picture or whatever you want to call it.
Inserting a list and lists within lists.
Inserting a table, labeling columns and rows.
Image and Text Within a Table.
Images, lists, and Text Within a Table.
Using a table for color box effects.

OK. Good to see you again. If you are still with me then you must have at least a little interest in the subject. So here we go.

What are you interested in?

If all you want to do is set up a single page on a single subject you don't need to do everything in this first lesson. There are a number of sites around that will host a single page of limited size. Many of them will do it for free. If that's all you have in mind you may skip to lesson B.

Finding a Host for a website.

If you want to set up a full blown website like mine there are a number of things you need to do before you start. First and foremost is finding a service that will host the site. This is a service that will permit you to design your pages offline and upload the files with a File Transfer Protocol (FTP) program.

I don't know how I discovered Angelfire. I guess I must have stumbled onto it. At any rate I haven't had any regrets. If you are willing to accept ads on your page you can have a site for free. For $4.95 a month you can have an ad free site with 1GB of storage. To show how effective my simple html system is this whole site only takes up 1/3 of that allotted storage space. There is one thing about Angelfire that probably drives some website owners away. That is, embedded spaces are not allowed in file names. You must use some other printable character. I use the underscore _ or dash -. It is well worth getting used to for the price and amount of space. I have never used their page development software and so can't say how much space it takes up. The little mention of Angelfire at the bottom of some of my pages is not required. I do it as a courtesy.

Setting up an account.

The first thing you need to do is set up an account on your chosen hosting site. On Angelfire it's pretty easy. You can have one account for each email address you have. If you only have one email address then you can only have one account and that means one website. I really can't walk you through setting up an account because it has been more than 20 years since I did it. But I do remember that it isn't rocket science.

Then you need to download and install an FTP program. I'm not being redundant. FTP stands for file transfer protocol. It's called FileZilla. You can DuckDuckGo the name and find a download site.

Next step is optional. It's Registering a domain name. You will have a domain name after you setup an Angelfire account but it's kind of long. In case you didn't notice, the direct domain name for this site is,

https://www.angelfire.com/electronic/funwithtubes/

I have registered funwithtubes.net but it isn't necessary. If you do decide to register one don't use the registrar that Danica Patrick used to advertise. TV advertising is expensive and they have to pay for it somehow. I use Namesecure where name registration is only $8 a year. The only reason to register a name is so you can get email at the same address as your website. Name secure can provide that but there is an extra cost. I think Angelfire can also provide email but the address might be rather long. If you are a licensed ham you are lucky. You can register your call sign and nobody anywhere in the world can have the same one.

Setting up your computer for offline viewing of your site.

You need to set up the same directory structure on your computer that you are going to set up on your site host. I suggest that you create a directory on your computer and in "Documents" named "Web name of your site HTML Files". That name will not appear on your site host. It will correspond to the root directory on your host. Your space on the host server will begin with the root directory designated by a \. Then as a subdirectory of that create one named "images". That word will appear in every link to an image so make it all lower case so you won't have to hold the shift key. Images will be a folder on your host. My "images" folder has quite a lot in it consisting of diagrams, photographs, and screen shots. If I had it to do over again I probably would break it up into these categories but it's too much trouble to go back and change it now. Let that be a lesson for you. Whatever you set up at the start is what you will have to live with for years.

Time Saver Hint.

Don't create a bunch of sub folders, sub sub folders, and sub sub sub folders. Remember when you call up a graphic file for display you have to type the path and file name every time. If you have set up a long path you will get very tired of typing it. If you decide to make three categories as I suggested make each one a folder within the root directory and give them short names.

End of Hint.

Now you need to put a file in the site root directory on your computer which is, "Web name of your site HTML Files". The file should be in plane text format and Notepad is probably the best for creating those kind of files. Open it and type The following just as you see it.

<html>
Hello, how are you.
</html>

Select save as from the menu and set the destination folder to "Web name of your site HTML Files". Set the "Save as type:" to "All Files (*.*)". This will prevent Notepad from changing the extension to .txt. In the file name box type "index.html" or "index.htm". As far as I can tell it doesn't make any difference whether you use htm or html. Choose one and be rigorously consistent.

Now open your favorite web browser and instead of going to an online site navigate to the file you just created on your computer. Do I hear you saying "That's easier said than done."? Here's the only help I can give you.

Firefox.

Open the files menu and select open file. Navigate to the file and open it.

Google Chrome.

Press F7 and type "File:///c:/Path/.../.../index.html".
Where " Path/.../.../" is the complete path to your index file.

Microsoft Edge.

I don't know how to do it in Edge. You are on your own.

A universal method.

Open Windows Explorer.
Navigate to your newly created webpage file which should have the name index.html.
Double click on the file name.
It should open in your default browser no matter which one it is.

Now you should see on your screen the words "Hello, how are you." And nothing else. Congratulations. You have just created your first web page. Bookmark it, or in more recent terms, set it as a favorite and place it on the favorites bar. This makes it easy to pull up. You are going to be accessing it frequently. This is the reason for putting it on the favorites bar. This is how you will preview your site before uploading it for all the world to see.

Now you may want to configure FileZilla to communicate with your hosting service. Although I don't recommend uploading partially completed pages as I have done here. Do as I say not as I do. The reason is if a visitor doesn't find anything interesting, he or she may never come back to see how you are doing. I'll give you the setup for FileZilla but I strongly recommend that you don't upload anything just yet. Especially your first webpage.

Setting up FileZilla.

After you get FileZilla downloaded and installed you have to configure it to contact your web hosting service and transfer files.

  1. Start FileZilla.
  2. From the Files menu select Site Manager or press ctl-S.
  3. Click the "New Site" button.
  4. Here is what you will see.

I really don't want to show you anymore. It might give some not very nice people the clues they need to hack my site. The second tab has some settings that need to be set. Taking the defaults is usually the safe thing to do. You will need to type in the path to where you are keeping your webpage files on your computer. If you run into trouble I will try to help you but I don't know all the ins and outs of FTP.

Now you are all set. Website host, domain name with email, and FTP program. "So now what do I do?" I hear you asking. Memorize the 4 basic commands and download the library files. If you look into these files you will have an experience somewhat like trying to read Greek. In the remaining lessons you will learn how to apply the library files and with that will come some degree of understanding. Your understanding will grow as you use these libraries to build a website.

What's Different About My approach?

In a word, SYMPLICITY. In my method there are only 4 commands you need to keep in your head. They are

* will continue in effect until canceled.
To cancel repeat command with a / following the > sign
For example. <h2>Header text</h2>

The number you type after the H in the header command sets the size of the print in the header. 1 is the largest and the text gets smaller as the numbers go up.

When the <blockquote> command is canceled the indentation returns to what it was before the command was invoked.

With these you can type text descriptions all day and never need anything more. When it comes to more complex operations I have created a series of example files which I can call up and fill in the blanks. These files comprise a library. As I built these files I had to look up the commands only once. I will provide these files to you so you won't have to look them up at all. As listed above there are only 4 commands you need to remember.

Downloading the library files.

I have created a library of files that contain the basic syntax to setup many functions on a page without the need to remember it or look it up.

These are presented in two formats.
1. Word 97 .doc format, and
2. Plane text .txt format.

There are 8 files in each format. They are,

  1. Page Starter. Has the proper header and footer in place to begin a page.
  2. Page Starter with Picture. Contains the header and footer but with the syntax for an image file in between.
  3. Picture. Syntax for a standalone picture.
  4. Equations Syntax for a few example equations.
  5. Table. Syntax for an example table. The user will have to adjust the number of rows and columns to fit the particular need.
  6. Table and Picture within table. Syntax for a table with a picture at the end of the table. The picture will always be linked to the table because it is a part of it.
  7. Table Multiple pictures within table. Table containing multiple pictures.
  8. List and Picture Within Table. Table containing a list and a picture.

Download MS Word Files.

Download Plane Text Files.

After you download the zip file of your choice click "Extract" to retrieve the files. Place them in a directory that you can find easily from the text processor you are going to use.

The files are write protected. I protected them to protect me from myself and you will be protected from yourself.

Here is a mistaken scenario that I have done more times than I like to remember.

  1. Decide to start a new webpage.
  2. Open one of the files that contains a header and footer.
  3. Start typing text and other commands between the header and footer.
  4. Save the file by pressing control S.
  5. Oops. Realize that I have just saved an hours work in the library file.
  6. After a few curses, Save the file again under the name I had originally intended.
  7. Open the library file, clean it out, and save it under the correct name.
After doing this a few times it finally occurred to me to write protect the library files so if I try to save over one of them I will get an error message reminding me to do what I should have done in the first place.

This page last updated Monday, April 04, 2022.

Home