|
Building An Easy Web Page II, Basic HTML If you are a regular reader you have noticed that we are celebrating the first anniversary of this column by adopting a new name, designed to better describe the target audience. I would remiss at this point not to thank all the readers who have taken the time and demonstrated the interest to write and provide feedback, ask questions, or make suggestions during this past year. All of your feedback is extremely welcome and appreciated. In last week's column we covered the mysterious subject of creating individual web pages, only to discover it is not really that mysterious if you know the formula. If you have not read that column and you want to make your own web page, you should start there. Otherwise, this week's column won't make any sense. Before we get started, I recommend that you open and print a copy of a reference page that will help you along the way. The address is
This site has an easy to read and easy to follow guide for what the different HTML codes will do. Two other sites that will be very helpful are www.hidaho.com/colorcenter/ and www.boingdragon.com/home.html. I suggest you find them and bookmark them because you will probably want to use them before you are
Modifying Content Using HTML Open the web page you created on Angelfire. Log on and get the basic screen that allows you to highlight your home page and click on the Create/Edit button. If you are having any problems doing this, check last week's column again. Click on that and go to step nine which we skipped over last week. You should know from previewing your page that you have a title in large font, followed by the Angelfire logo, followed by a bit of text, (thank you for visiting my web page, please come again), followed by your links, followed by your counter, followed by your e-mail address. It is in step nine that I added in the 10 reasons I like my Mac on my web page. Suppose you wanted to include a poem and you wanted it to look like this: How much is that doggy in the window? If you go into the box in step eight and type that in, including the formatting, you would expect it to be reproduced the same way on your web page. After all, everything else so far has worked that way. However, what you would actually see on your web page is this: How much is that doggy in the window? The one with the waggley tail. How much is that doggy in the window? I do hope that doggy's for sale. The formatting that you included would be completely ignored. To make the text look like you want it to, you have to use HTML to give it directions. The reason you did not have to do it to the parts of the web page that you have already created is that the Angelfire system has the appropriate coding already built in. Now I want you to go back to the bottom of the page and click on Advanced. This is going to change your entire web page (this home page only) into HTML format. You will not be able to go back to Basic once you enter Advanced. This might sound weird, but I want to stress it: You will never be able to change this page in the Basic mode again once you go into Advanced mode. If you don't want to mess around with Advanced mode, simply don't. But since it is much easier to work with than you might think, I encourage you to try! You can always make a new page later and work with it in Basic mode. There are only two rules when using HTML. (1) Cross your t's and dot your i's. (2) Close any door that you open. What I mean by this is that you have to be very careful to put in every single mark that is required and any time you direct that something begin (bolding, centering, etc.) you have to direct that it end as well. In the following examples, I have made the HTML bold so you can more easily see it. You do not have to make your HTML bold. Once you have switched from Basic to Advanced, your page will change into something that starts out looking like this: <html> <head><title>My Home Page</title></head><body bgcolor="#daa520" text="#000000" link="#228b22" alink="#ff0000" vlink="#800080"> <basefont size="3"><h1 align="center">My Home Page</h1></align> <div align="center"><img src="/images/afx60.gif"></div> <p> Don't be scared by this, it's easier than it looks. What It Means <html> {this indicates that html is being used. The < and the > indicate one open and close instruction} <head><title>My Home Page</title></head> {this indicates that at the top of the page is a heading. <head> starts the heading. <title> starts the title. The text follows. </title> closes the title. </head> closes the heading.} <body bgcolor="#daa520" text="#000000" link="#228b22" alink="#ff0000" vlink="#800080"> {this run indicates the colors used for the background, the text, the links, and the color of the links after they have been accessed. The colors are given in numbers, but that was automatically included when you choose your color pallet while in the basic format.} <basefont size="3"> {this indicates the font size that will be used throughout unless you give other, specific instructions.} <h1 align="center">My Home Page</h1></align> {this indicates the header style type and that the words should be centered. </h1> closes the special font and </align> closes the centering.} <div align="center"><img src="/images/afx60.gif"></div> {this tells what image you want and that it should be centered} <p> {this says you want a new paragraph entered here.} See how easy this is? As long as you have the guide to what the code means you can create a lot of things. Sometimes you have to experiment to make sure you get exactly what you want and you should save frequently as you create. What I am going to do now is give you some cheat sheets for adding a photo, an animated Welcome, a graphic downloaded from the internet, and your own, special, counter. On my web page I have a centered, large type title, followed on the next line by Austin, Texas, followed on the next line by a photo. Text that will actually appear on your page, such as the title of the page, should be typed in the exact format that you would use if you were typing it in a document; i.e., initial capital letters, spaces, etc. Here is how the HTML code looks for those first two lines. <h1 align="center">My Home Page - Nancy Carroll Gravley</h1></align><p><h2 align="center">Austin, Texas</h2></align> At the end of this paragraph is the code that you will use to have a photograph that is centered. To get your photo you have to upload it to your page. Here's how. Click on save at the bottom of your page. That will take you back to the web shell page once again. Look at the bottom of the page where it says "File Upload." (Note: to have the ability to upload anything you must be using Netscape 2.0 or higher, or Explorer 4.0 or higher.) Find your scanned photo and make sure it has been saved as a “.gif” document. Note what folder it is in, or move it to your desktop. Next to "File Upload" is a Browse button. Click on it and follow the directions until you get to the photo you want to use. For instance, if your photo is found in a folder titled Pictures, you would choose Desktop from the pull-down menu, then you would choose the folder Pictures, then you would click once on the gif photo that you want. Click on Open and the name of the photo should appear in the File Upload box. Click on "Upload" and you will see the name of the photo appear as a second item in the box labeled FILES, where it will remain. Then just replace that exact title line in place of the text "images/imagename.gif" in my sample below. If you want a different size photo change the width and height numbers without changing anything else. Experiment until you have it the size you want. If you want it on the left or right instead of center then change "center" to the appropriate term. The photo on my page is enclosed in a table. Making tables will be covered next week. When you have everything to your satisfaction then be sure to enter the HTML text into your own document. <div align="center"><img src="images/imagename.gif" width="70" height="90" </align></div> By now I bet you have this all figured out with the help of the HTML guide. Adding the animated Welcome or any other object found on the internet is a little bit different in that you don't upload it. All that is necessary is that you include the entire web address as I have done in the sample below. I found the best source of interesting animated signs to be at www.barrysclipart.com. Look under the ones created by Tony or check out any of the others. I found my animated Mac logo at http://www.clipartconnection.com. Of course, if you wish you can hunt the entire web for the art that you
<div align="center"><img src="http://www.barrysclipart.com/tony/animated/image/snakwel.gif"></div><p> You can add as many things as you want by just coding them correctly and putting them where you want them. Experiment until you get your page to look just like you want it to look. The web shell that is supplied by Angelfire has a traditional counter at the bottom. A counter tells you how many people have visited your page. You can keep the one that comes with the shell or get yourself something unique. I found mine at www.boingdragon.com/home.html. This is a free site that provides a number of counter styles. In some cases, such as the cat I used, you can even choose the colors of the object. Once you have a counter set up to your satisfaction there are directions at the site for uploading it to your web page. Primarily you need the complete http:// address which you can insert in place of the one I used below. <center><img src="http://www.km-cd.com/cgi-bin/cat/nancygravley"><p> Don't forget to add those <p>s when necessary to have adequate spaces between items on your page or use <br> which works like a carriage return. When adding regular text to the document, such as my words about the Mac, simply type in the words and then add the appropriate HTML code as described in the memo in the HTML guide. That really is all there is to it. Use the HTML guide to find other things that you want to add like putting some words in italics, using different font colors, or making some words blink. Just remember to close any door that you open and save as you go. One final thought. Please e-mail me the address of the web pages you create. I would love to see your work. I haven't forgotten that we haven't yet covered Step two, adding unique backgrounds. The next web page development that we will tackle will include that subject plus making tables using color in tables and pointing your page to search engines. These additions will help you create a really professional looking web site which can be important for selling things or impressing grandchildren and old school mates with your skill. 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. |