There is a requirement that at least the top page in each site must display a banner ad. We offer two choices of banner ads. Our preference is for you to include the necessary code to insert a banner ad which displays an ad for FamilyNet 20% of the time, an ad for HelpingTulsa 10% of the time, and the other 70% of the time displays one of 35 Bible verses, however for organizations concerned with Church/State separation issues, we also have a secular banner ad which just displays the FamilyNet or HelpingTulsa banner ads. Click here for further information.
If you want to register your own Domain Name, I recommend Domain Registrars like Murcom which charges $8.95 a year or lower, or InexpensiveDomains, which charges $15 a year. However if you cannot afford even that, I can provide you with a "pseudo domain name", based on the htweb.org domain name. For example your website could be http://yourorganizationname.htweb.org.
Your group is free to use any program you want to construct your web page. This article describes how to use the Composer which is a part of the Mozilla Web Browser, and I am describing it's use for two reasons: (1) it is fairly easy to use, and (2) it is available for FREE. Mozilla is available for free download from here.
Tutorials on Mozilla Composer
HelpingTulsa provides computers, and websites, to schools, churches, and non-profit organizations, including low income / Section 8 housing for seniors and disabled people. Since this later category of recipients represents the majority of the refurbished computers we have delivered most reently, I am going to focus this article on the creation of a website for the hypothetical West Tulsa Apartment Complex (WTAC).
We are going to build our webpage on our hard drive, and once we are satisfied with how it looks, we are then going to upload it to the HTWEB server. The first thing we need to do is create a folder on our hard drive to hold the web page. To do this we need to use the Desktop Explorer. Put the mouse on the Start button, right click, and select Explore from the small flyout menu.
We select Drive C, and then click File, pull the mouse down to New, slide it over to Folder, and click.
This creates a new folder, with the name of the folder temporarilly set to be New Folder, but it is highlighted, and we can type in webpage to make the name of the folder be webpage.
We will move a photo of our hypothetical apartment building into that folder, along with any other graphics we need, and when we build it, we will put the HTML code for our web page in that folder.
When you start Mozilla, it takes you to the Browser. The icon in your taskbar will be:
This is NOT where you want to be to build a web page. To build a web page you need to be in the Composer. To switch to the Composer locate the icon that looks like a pencil on a piece of paper, in the lower left corner of the Mozilla screen, and click it:
This will take you to the Composer, and the icon in your taskbar will be:
Let us first put a title at the top of our web page. We select Heading 1, which controls both the font and size of the letters, and select center, and type in the name of the organization: West Tulsa Apartment Complex
Let us include a photo of our hypothetical apartment. Press enter, then selet center again, and press the icon for Image, and then press Choose File
This brings up the Select Image File menu. We select the file apartment.jpg and click open
This brings up the Image Properties box. There is a box labeled Alternate Text. Whatever we type in that box will appear on the viewer's screen when they position their mouse over an image. If we don't want to identify an image we can select the Don't use alternate text button, but it is good practice to provide alternate text for any image, because that way if someone who is vision impaired comes to the web page, and is using a device which "speaks" what is on the screen, they will be able to hear what an image is. So let us type in the name of our image West Tulsa Apartment Complex. Note that the actual size of our photo is 640x480. This is too large for us right now. We could use a graphic program to shrink the photo, and that actually would let our web page load faster, but right now let us just click the Dimensions tab:
click the Custom Size radio button, and type in 320 instead of 640 for the width. Since Constrain is checked, this automatically reduces the height to 240 from 480.
That gives us a reasonable setup for our web page.
Let us build a slightly more complex web page. We can use a web browser and go to http://maps.yahoo.com/ to get a map to our apartment building. Since it is a hypothetical apartment building I don't have an address, so I will use the address of my house, 3311 South 127 East Place.
When I click Get Map I get the map. I put the mouse over the map and right click, and select Save Picture As
This brings up a Save Picture window. I set the File Name to map and click Save
Let us start over, by going to File, New, Composer Page
Then let us click the Table icon, and select 1 row, with 3 columns.
That will give us:
Put the mouse in the first box, and type West Tulsa Apartment Complex, pressing the Enter key after each word, then highlight all four words, and select Format, then Size, and in the flyout menu select xx-large.
When we started with the table, we had one with three equally sized cells. But now for some reason the cell with the apartment name is huge, and it does not look like there will be room for the picture and the map. Don't worry. It looks like that because thee is something in the first cell, and nothing in the other two cells. We will have plenty of room. Let us put the mouse in the second box, click Image, and select the apartment.jpg image, just like we did above.
Well now the first two cells are large, but the third cell is very very small. Don't worry, remember it does not have any thing in it. Let us put the mouse in the third cell, and click Image, and select the map.gif file. We will set the Alternate text to be Map. The image size for the map.gif file is 400x400. That is a bit too big for us right now, so like we did on the apartment picture, let us go to the Dimensions tab and select 200x200. That is a little too small, but we will fix that. Let us press enter, type "Click to enlarge", highlight those words, and click the B to make it bold face. Then let us select both the map and the words, click Link, click Choose File, in the box Files of type select Image Files, and select map.gif
This gives us a reasonable layout. There are some things we need to do to improve it, but right now it looks pretty good. To try to clean it up some, put the mouse in the first box, right click, and select Table Cell Properties.
Right now, Content Alignment is Top Left, let us change it to Middle Right, then click the Next button, and change the alignment for the middle cell to Middle Center, then click Next, and change the alignment for the right cell to Middle Center, and click OK
That give us:
Before we do anything else, let us save what we have. Click the Save button, and it will ask for a title for this page. We enter West Tulsa Apartment Complex, because that is what we want to appear at the top in the viewer's browser.
Click OK, and we get a Save Page As box, and initially it wants to save the page with the name West_Tulsa_Apartment_Complex.html, but we don't want that. We change the file name to index.html, since it is standard for the top page of a web site to be named either index.htm or index.html, and since Mozilla Composer automatically names everything with an "html" extension, that means we want index.html.
Let us see what the page looks like in the Browser. Click the Browse button
And this is what it looks like:
We see that the Click to enlarge works in the Browser, and it brings up the map full size
But the lines that constitutes the table are disturbing, so let us switch back to the composer (click the icon with the pencil on the paper in the task bar).
Put the mouse on one of the cells of the table, right click and select Table Cell Properties, but then click the Table tab
Change the Border to 0 pixels, and the Padding to 10 pixels, and press OK
The light red dotted lines are certainly less intrusive, but can we get rid of them altogether? The answer is yes, they are just there to show the boundaries of the table while in composer mode. If we click Save, and click Browse we see the table lines have disappeared completely in the browser.
This is a good start for our web page. I am sure we will have more to add in the future, but for now let us press Enter several times, to create a little blanks space, and then click Insert and then Horizontal Line:
Then we will press the center icon, and type Web Page by Don Singleton. Highlight the "Don Singleton" and click the Link icon, and type mailto:don@donsingleton.com. This will create a link on the webpage, and when someone clicks on it, it will automatically open up their email program, with my email address "don@donsingleton.com" filled in, so they can send me a message.
Remember that there is a requirement that at least the top page in each site hosted by HelpingTulsa / HTWEB must display a banner ad. This is a good place for that ad, so let us click right after the link with my email address, press enter and type "xxx" to show where the ad will be. Right now we have:
We have a choice between two banner ads. A secular one that automatically alternates between an ad for HelpingTulsa, and one for FamilyNet (the ISP that hosts the HelpingTulsa server), and one that displays one of those two ads 30% of the time, and the other 70% of the time displays one of 35 Bible Verses. Since Section 8 HUD housing units have governmental involvement, some fool may complain we are threatening the separation of church and state if we go with the Bible Verses, so let us install the secular one. http://htweb.org/free.htm says "to include this secular banner ad, you must have <script src="http://htweb.org/cgi-bin/npr/ads.cgi"></script> somewhere between the <head> and the </head> html tags, and then you must have <script language="JavaScript"> banner(); </script> where you want the banner ad to appear." How are we supposed to do that, using Mozilla Composer?
Look at the lower left corner of the screen. Click on <HTML> Source
That shows us:
<html>
<head>
<title>West Tulsa Apartment Complex</title>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
</head>
<body>
The instructions say to include <script src="http://htweb.org/cgi-bin/npr/ads.cgi"></script> somewhere between the <head> and the </head> html tags so let us position the cursor immediately before the </head> and type <script src="http://htweb.org/cgi-bin/npr/ads.cgi"></script> and press Enter.
That give us:
<html>
<head>
<title>West Tulsa Apartment Complex</title>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<script src="http://htweb.org/cgi-bin/npr/ads.cgi"></script>
</head>
<body>
Now grab the scroll bar at the right side of the screen, and scroll to the bottom, where you will see:
<br> <hr width="100%" size="2"> <div align="center">Web Page by <a href="mailto:don@donsingleton.com">Don Singleton</a><br> xxx<br> </div> <br> </body> </html>
Do you see the xxx which shows where we want the banner ad to appear? We need to type <script language="JavaScript"> banner(); </script> in place of the xxx. This gives us:
<br> <hr width="100%" size="2"> <div align="center">Web Page by <a href="mailto:don@donsingleton.com">Don Singleton</a><br> <script language="JavaScript"> banner(); </script><br> </div> <br> </body> </html>
and when we click Preview we switch back to our web page, but it does not look any different than before. But let us click Save and Browse, and we switch back to the web browser, and see what we have:
And if we click on the Don Singleton link we see that it really does bring up an email program, with my address filled in as the "To:" field.
Let us upload it to the website. For this example I am presuming that the West Tulsa Aparatment Complex decided not to get their own domain name, and decided to just go with our pseudo domain name http://wtac.htweb.org, and that they asked for their login to be "wtac", and that they gave me the password they wanted to use, and I set up their space that way. They would use WS-FTP to upload their page; a free version of WS-FTP-LE at http://tucows.net/preview/195136.html or http://www.ftpplanet.com/downloadLE.asp Some good tutorials on using WS-FTP are available here
Starting WS-FTP-LE we fill in the Session Properties as:
| Profile Name: | wtac |
| Host Name/Address | htweb.org |
| Host Type | Automatic detect |
| User ID | wtac |
| Password | the password you provided me |
Click the startup tab, and set the Initial Remote Site Folder to /html, and set the Initial Local Folder to c:/webpage (which is where we put the webpage on our hard disk, and then click OK to connect.
Select the three items to be uploaded, and click the Right Arrow
That uploads all three files to the server. Once they are there, click close.
A very interesting expansion of the donation we have made of providing computers to low income / Section 8 housing was initiated by Mary Gouveia, Social Worker at Indian Springs Apartment Complex. We provided her with an Road Warrior, and she set up her own computer refurbishing project and launched "Computers for Families", a program which allows a family living at Indian Springs Apartments the opportunity to earn a gently used computer, including the computer tower, monitor, keyboard, mouse, and mouse pad. Each child ten years old and older and each adult in the family is asked to attend five computer lessons of their choice, and do fourteen hours of volunteer work. By attending classes she knows that the computer system will go home with the family and not sit on a shelf in the corner of the living room and go unused because they do not know how to operate it. The provision for volunteer work lets tenants accept a computer with pride, because they know that they earned it. Also, it enforces the idea that to get something of value one must work for it.
She also has initiated "Printers for Families" to allow families to earn a printer, and "Computer Store" for computer supplies paid for with hours of volunteer work rather than dollars.
If she wants to, Mary could also initiate a "Web Page for Families" program, teaching a class in Web Page preparation, and then she could let them prepare their own web page, using the scanner we provided for her Computer Lab, and then she could handle the uploading of a web page for the resident (so that she could be certain the content was consistent with the HTWEB.ORG requirements (family-friendly material, with NO pornographic or illegal material).
If she decides to do this, this is how she would set up the structure for that page, create a link for the tenant's page, and upload it.
scroll to her C:\webpage folder, highlight it, and select File, New, and scroll over to Folder, and when a folder called New Folder appeared and was highlighted, she would type in johndoe (no spaces, and no capital letters). She would then put John's floppy disk in her computer, and scroll the desktop explorer up to Drive A, click it to show the files on the floppy on the right, highlight all of them with Ctrl A, scroll the left side of her desktop explorer down until she can see her webpage folder with the johndoe folder under it, and then she would right click on the selected files in drive A, and "right drag" them over to the johndoe folder. When she let the right mouse button up she would get a menu allowing move, copy, and cancel. Clicking copy she would copy John Doe's files to the johndoe folder.
and in response to the question:
click Yes to transfer both the Apartment's page and the tenant's page and all of the tenant's graphics.