Building An Easy Web Page
Are you ready to swim out into the deep water and make your own web page? I promise you can do it, it can be free, and that the mystery of HTML coding can easily be yours for the asking. It is a somewhat time consuming process and you might wonder why you would want to bother. I can think of several good reasons. You may have a hobby, or charity, or project that you want to make others aware of. You may want to sell things. (The site we will be working with will allow you to do that.) You may want a forum for sharing information about your family, or the best reason of all, you want to be able to do it.
With the help of my youngest daughter I checked out all the free sites set up to help you make your own web page(s). After looking at a number of them, I decided that the most user friendly one is Angelfire and that is what we will use to make your web page. You can find this site at www.angelfire.com. We are going to discuss making web pages for the next 3 columns and by the time we are finished you will be able to have a page/site that you can be proud of. This week we will cover creating a simple, formula type web page. The next two columns we will cover personalizing your page, linking page 1 to additional pages, making tables, and ways to get your page acknowledged by internet search engines.
Speaking of the next two weeks, I will be back here same time, same place next week; but my column, which is celebrating its first birthday, will have a new name - Computing With Bifocals.
Why don't you check out the page I created so you can see where we are going with this. You can find it at www.angelfire.com/nc2/texas. Once you know how to create your own page you may want to move the contents to another space that does not carry advertisements. Many Internet providers will give you space for a small fee if you are using their service.
First off, let's look at some definitions.
Web Page - a site on the Internet, which can be viewed by anyone, created and maintained by an individual, organization, or business for a specific purpose.
HTML - the primary code used to create the desired effects; such as color, organization, type size, etc.
Upload - the process of transferring your work to an Internet server (the computer that will host your web page so others can see it. You can think of it as saving your work (photo, text, or icon) to the web page you are creating.
Banner Ad - an advertisement that usually appears at the top or bottom of a web page. Banner ads are used to pay for the web space you are using and can only be installed by the owner of the web site; i.e., Angelfire or The Mac Observer.
Home Page - the first or main page of your web site.
URL - the name for the internet address of any item or site. Why do they call it URL instead of web address? URL stand for Uniform Resource Locator which is nerd-speak for web address. So in their eyes, they do call it a web address! :-)
Link - the coded web address that allows you to automatically go directly to another site by clicking on an image or text that contains the link.
Create A Basic Web Page
OK, lets get started. First, think of a name you want for your page, and, if you want one, a theme. The name you choose can be a maximum of 20 characters with no blanks, however this will be a permanent part of your web address so the shorter the better. It will be case sensitive so use all lower case, all upper case, or numbers. I strongly recommend lower case letters because that is what most people will assume you will use.
Open up the Angelfire site.* You will be asked to register. Right off the bat you will be asked to choose a URL. The first part will be the same for every person. It is http://www.angelfire.com. You have to choose a designator from the list provided in a pop up menu and then type in that name that you thought of earlier. The final address will look like this: http://www.angelfire.com/designator/name. Write the whole address down somewhere or you will never be able to get back into your page. Next you will be asked to type in a 6 to 8 character, case sensitive, password. (Write that down too) You will be required to include your name, address, gender, age group, and e-mail address. Click on the Create button at the bottom of the page. This will take you to the starting point.
You will go to a page named Web Shell and this is what you will use to create your page. There will be a box at the top that says Welcome (your e-mail address) to Angelfire's Web Shell. Below that box will be your home page address, the size of your account and how much space you have used, and the direction to either "highlight the file you wish to modify", or "enter a name in the box" to create a new page. Below that is a Box named FILES and you will see something that looks like:
index.html (1160) <-- Your main page.
The number represents the size of your page and it will change as you add things to the page. Ignore the NEW box for now.
Below the NEW box are several buttons. The first one says Create/Edit. Below those buttons is File Upload. You can ignore that for right now also. Hit the Create/Edit button and you will be sent to a new page containing three steps.
Three Easy Steps to Get Started
The first step is to choose the editor you wish to use. Make sure you click on Basic. The second says choose a layout for your page. Click the button above Standard. The third says choose a styleset for your page. For the purpose of this exercise, select Styleset #4 because you will be able to change all the colors as many times as you want. Click on the "Submit" button. The next page is the editor page. Once again there will be an identifier at the top that says what file you are editing. You will be allowed to individualize your file as much as you want and can leave out any part that you want.
12 More Steps - But They Are Easy Too
Step one is Choose Colors. You will see 5 pop up menus that show the colors you selected when you choose styleset #4. There is a line that says "View Colors in convenient pop up window." Click on that and you will see all kinds of colors and shades. You can choose any of those colors for each of the 5 boxes.
(Note: at any time from this point on you can look at what you are creating by clicking on the "Preview" button at the bottom of the page. However, if you take a very prolonged look you may lose the changes you have made as things time out. To keep that from happening click on the "Save" button and then, after it is saved, click once again on the "Create/Edit" button and then on the "Preview" button once you have returned to the work page. To get back to the edit page from the preview page, click on Back or <- on the tool bar)
Step two is Add Background Image URL. Skip that one for now.
Step three is Select Page Alignment. There is a pop up menu and you choose left, right, or center by clicking your choice.
Step four is Enter Base Font Size. There are 7 sizes from 1 to 7 with seven being the largest. This will be the font size for most of your text. For now use the pop up menu and select 3 since this is the standard size.
Step five is Enter Page headline and Title. In the empty box type in whatever name you want at the top of your page. Then select the Headline Size and the alignment from the pop up menus.
Step six is Add Main Image URL. When you selected the Standard layout earlier, you told the computer that you want to have one photo, or image, or animation, of some kind. Until you change it yourself, the Angelfire logo appears on your page. Skip this step for now. The Angelfire logo is saving your place for you to work on later.
Step seven is Create List. If you want some kind of list on your page then you can create it here. First give it a title and then use the pop up menu to indicate how many items you want in your list. Once you have finished your list click on the "Refresh" button. If you don't want any kind of list then just make sure all the blocks are blank and click on "Refresh."
Step eight is Create Links. There are a couple there already to show you how it is done. You can leave them or replace them. Type in a title in the empty box and then use the pop up menu to indicate how many links you want to include. Hit refresh. You can change this number at any time, followed each time by refreshing. Type in the appropriate web address (including the http:// part) in the first box on the left; i.e., http://www.macobserver.com. Then type in a description on the right; i.e., The Mac Observer - A Web Site for Mac Lovers. The only thing that will show up on your web page is the description you designate, but the reader will only have to click on that description to go directly to the page.
Step nine is Create Text Block. This is the really fun part and we will get back to it later (next week actually).
Step ten is Order the Items on Your Page. There is a small table with four lines for main image, list, links, and text block. You decide how you want them arranged on the page by clicking the correct box. If you are leaving out a section then just skip it.
Step eleven is the Page-Hit Counter. Click on Yes.
Step twelve is Include Email Address? Click on Yes if you want readers to be able to e-mail you directly or No if you don't. If you click Yes, your e-mail address, the one you registered with, is automatically inserted.
Click on Save. After it is saved, click on Create/Edit, and when you get the create page back, click on Preview to see what you have created so far.
Take a break. You deserve it and you can relax now because the shell of your page is up and ready. Go back and look at your page again and make sure you have everything there set up so far the way you want it Next week we are going to leave the basic setup and go to advanced. Once you leave basic you can not go back to it.
That's all for today. Please come back next Wednesday for part 2 and remember to look for the new column name: Computing With Bifocals.
* To open an Internet site go to the address section of your Internet browser. It is usually at the top of your Internet page and will have an address in it that starts with http://www. Erase or remove the address that is there and type in www.angelfire.com. (Note: you do not have to type in the http://. It is automatically set for you on today's browsers.)
If you have any tips, suggestions, or other comments about this, or any other Mac topics, send them to me so that I can share them with other readers.