|
Building An Easy Web Page III, Adding Extras Does anyone beside me find it ironic to refer to something as simple and then use three week’s of columns to explain just how “simple” it is? It really is simple in terms of not being mysterious, but if you have been working along with me to create your own web page you have discovered that it is time consuming. In the first of this series (Sept 1) we learned how to use a standard web page creator that is provided free in return for advertisements on your page. We are using Angelfire.com. In the second of this series (Sept 8) we moved into using HTML code to personalize our page(s). We also identified some internet resources that explain the HTML code, that help you determine colors you want to use, and a source for getting animated icons for your personal page. We learned how to add our own scanned photos, how to change colors, and how to add other kinds of images by adding the appropriate code in the appropriate order. We also learned how to get and use a counter to count the people who may visit our site. We have just two guidelines for using HTML, but they are very important. They are: (1) cross your t’s and dot your i’s, and (2) close any door you open. To practice skills you may want to do as I did and create a second page. To do this you open up your Angelfire site by logging on and going to the basic screen that allows you to click on the Create/Edit button. There is a box there that is labeled NEW. Move your cursor to that box and type in page2.html and then click on Create/Edit. You will be sent back to the page that allowed you to start your first page. Don’t worry that anything you do now will affect your first page. Angelfire knows you are working on page two. Start off the same way and choose Basic in step 1, Standard in Step 2, and then choose Styleset #1 in Step 3. We are using Styleset #1 because we are going to add a backgroup instead of just a color. Click on Submit and you will see the second page of the basic set up - the first of the 12 directional steps that we covered last week. Skip step 1 until you have chosen your background. The directions for step 2 offer you the option of using your own background or choosing one from their library. I suggest you use their library so that you get a good feel for the process. Double click on Library. Don’t be surprised if this take a long time to open. There are a lot of graphics there. On my machine it actually took more than 15 minutes for the table of contents page and more than 20 minutes for the actual background page to completely open. Remember though that I have an older machine that many consider to be slow. Once the contents page is open you will see links to GIFs, JPEGs, buttons, bars, images, etc. Choose either the GIF or the JPEG link and double click on it. When it opens all the way then you can scroll down the page until you find a background that you really like. If you don’t like any of them then click the back button at the top and go back to the contents page and look at the other set. When you find one you like write down exactly the location and name of the image you want. The location will be indicated in a white box at the top of the page. The name of the image will be next to, or below it. The back ground I choose is listed like this: /bg/teal_paper.gif. Type in the identifier for your chosen background in the text box in step 2. Then you can go back to step one and pick out colors for the text, etc. that will compliment your background. Finish the rest of the steps in the basic section. Be sure to click “no” for the counter, and probably, for your e-mail address. You probably don’t want either of them repeated after page 1 unless you are selling things. In that case you probably do want your e-mail address on each page. If you want to add a graphic to replace the Angelfire logo on your second page you will get one in the same manner as you did for page one. You can go back to the contents page (Click on the word image located on the right side of your basic set up page) and choose from among the available images offered by Angelfire or find another somewhere on the net and put in the whole address, including the http://www. If you want to just use a photograph then follow the directions for that in the previous column. Put the address for whatever you choose in the box in step 6. Page Links Once you have created a second (or third or fourth) page you need to let the reader know that you have more than one page and also point the way from page to page. You do that by linking to your own pages instead of somewhere else. I wanted a text link with blue font color, located on the right side of my page (page 1). The code I used for going from my home page to page 2 is as follows: <p align="right"> <a href="page2.html"><font color="#5500FF" alink="#FF2020">Click Here For More</font></p></a> Just be sure you put in the right name for your page if you called it something other than page2.html, and of course, you can use whatever words or colors that you wish to give directions. You can also hunt up a graphic of some kind, such as an arrow, and get fancy, but remember that the more graphics you have on your page the slower it will open. You noticed that I aligned my message to the right since we usually look right when turning a page in a book, but you can align it anyway you wish. Remember to add a link to your subsequent pages to send the reader back to your home page as Tables It took me awhile to figure out how to make a table because the instructions I found were not explicit enough (for me). However, once I figured it out it was kinda fun making it work. There are three basic HTML codes that you have to use to create a table. <table> - tells the computer you are starting a table </table> closes the table Being a typist of long standing, I kept trying to figure out how to make my cells the proper size to fit my text or image. The fact is that you don't have to worry with that. It adjusts automatically. A basic table, at the point of creation, would look something like this: Basic Table
To create it you would type in the following code. Notice that I added the word "border" to tell the computer to include a border. <table border="2"> Why don't you try this out on your web page? I found it helped to solidify my understanding. If you don't want to take a chance on messing up the web page work you have already done then just create a new page for practicing. So long as you don't link to it, no one else will be able to see it. Now that you have the basics down there are a couple of other things that give you control over your table. If you remember from looking the table I created on my web page, I have several single rows interspersed with one double row that contains a photo. If you add an instruction to "colspan" you will tell the computer to expand a cell so that it takes up more than one column. "rowspan" will accomplish the same things for rows. Therefore, to get a table that has a single row, followed by a single row, followed by a double row I would use this kind of code: <table border="2" align="center">
Basic Table With Text One last thing about tables. You can add color to cells. Say you are advertising things from an estate sale and you have a 1985 Lincoln Continental that you are selling for $20 and you want to emphasize that item. Your table would be composed of 3 rows and the coding would look like this. <table border="2"><tr>
Being Listed In Search Engines Suppose your web page is all about breeding a rare form of tropical fish found only in Hawaii. You would like anyone on the internet who is searching for that kind of fish to find your web page. I always assumed that once your web page was on the internet then the search engines would find it. Wrong! You have to give each of the search engines your web address (the URL). It is extremely helpful if you also include key words that help the engine properly categorize your page. For the fish page you might choose the kind of fish, tropical fish, Hawaii, and breeding. To include this information META tags are written in HTML and they go on your page between the <html> tag and the <body> tag at the top. You put them there so they won't show up on your page. For our fish breeder the META tag would look like this: <META name="keywords" contents="XYZ fish, tropical fish, breeding, Hawaii"> There are other pieces of information that different search engines will allow you to include, but they really are designed for commercial sites. However, if you want to check them out the search engine help pages will explain options in detail. At this point I hope that you can easily create your own web page using colors, backgrounds, graphics, animated graphics, counters, photos, tables, META tags, and links. I would really like to see what you have done so please e-mail me your web address. 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. |
||||||||||||||||||||||