Creating a Web Site

Using 000webhost.com

The 000webhost.com Site

• You will be required to create an account in order to use their host computer

• 000webhost.com provides free web hosting• Your site URL will look something like –

_______.netai.net (your user name goes in the blank)

Logging into the Member Area

• You will generally need:– The e-mail address you provide during registration– The password you create for this account– And the security characters that they provide

To login go to - 000webhost.com

000webhost.com LoginOn the right side of the page there is a menu – click on “Members Area”

Provide:1.The e-mail address you gave during registration,2.The password for 000webhost.com3.Retype the numeric sequence4.and press “Submit”

Login (Continued)

Your Members Area spaceAll of the tools that you will be using are on the “CPanel” (Control Panel). Click on “Go to Cpanel” to continue.

The CPanelDon’t worry (for this project) about getting a .com domain. Scan down the icon menu until you see the “File Manager” icon. This is where most of your stuff will occur. Click on it.

File Manager login

You will see this login screen. Don’t mess with the Username! It is your 000webhost.com ID. Just provide your Password and click Continue.

File Manager operationsAll of your files will be loaded into the “public_html” folder. For ease of operation we

will just go there now. So double click on “public_html”.

My public_html Directory

This is what my directory looks like. Yours will not have any files in it.

We will refer back to this graphic from time-to-time. This is your “working directory”.

Uploading your Files

To upload files to your site – click on “Upload”.

Uploading Files (continued)Click on the “Browse…” button. Locate and ID the file you want to upload to your site. You can repeat this for as many files as you want – up to 5MB. When you are finished IDing the files – click on the green check, below the screen title.

Uploading Files (continued)You should then get this screen. Simply click on a green arrow. Once the transfer is indicated as being complete, click on the blue (“Back”) button. Be sure to upload any graphics files your html page uses, also.

Converting Your html page into Your Home Page

You will now be converting your HTML page (flie) into your site’s home page. This is accomplished by renaming your file to index.htm or indx.html. Most site home pages are the index page – this is common.

Click on the box immediately left of the file name then click on the “Rename” button.

Converting Your html page into Your Home Page (continued)

Type the new name in the text box.I have been having troubles with the system timing out and have had the security box appearing requesting my password. I simply provide the password again. Sometimes there is another javascript error which I generally close then back out of the window then everything seems to work OK.

Once again after you type in the name click on the green check-mark.

Converting Your html page into Your Home Page (continued)

At this point you might want to check to make sure the index page is recognized.

• Open your browser in a separate window.• Type in your URL (ie. ebrunjes.netai.net)• Your page should appear• If not – there are 2 possibilities –

– Your index.htm file is not in the public_html folder– You probably used a capitol ‘I’ to start the

filename. All characters MUST be lower case.

Editing your Links

I found there are a couple of eccentricities• You have to explicitly tell the site the folder to

look in for your files (even though they are in the same folder – very strange)

• The site does not seem to work with PowerPoint files very well. At least I have not gotten PowerPoint files to work well.

Editing your Links (continued)

• The characters “./” should be put in front of your file name in the anchor tag ( <a ) of your link.

• For example – <a href=“MySchedule.doc”>

Is changed to –<a href=“./MySchedule.doc”>

This alerts the browser that the file is in the current folder.

Do this for each of the file links. I have not tried this for graphics. Experiment and let me know what happens.

Be sure to save your results. Then go to your browser and click on “refresh” to see the results. (Refer to the following slides.)

Editing your Links (continued)Select the file to edit by checking the box by the file name, then click the “Edit” button. ( )

Editing your Links (continued)

This is the text edit area. Notice that I have already edited the hyperlink references in the second and third lines. Be sure to save your work!! Click on the disk icon. To see this page, the URL is - ebrunjes.netai.net