Print a copy of this page as is, to see what the HTML Code produces;
Save the page in plain text (DOS text) format in a file, and open it in Wordpad or Notebook as a plain text file.

This particular format page will support a number of pictures which will appear on alternating sides of the computer screen (or printed page, if your screen resolution is 800 X 600 or less), with text wrapped around to the side and below the picture(s). There is provision for a graphic line between each picture and its accompanying text, in this case, a little stand of trees. You can substitute any graphic line for the one used in the samples, which is "lntreez.gif" If you prefer, you can use a simple horizontal line by deleting the "IMG SRC" reference, and inserting the "HR" reference instead, inside the "less than" and "greater than" brackets. Of course, you also must delete this text, and insert text of your own.

One of the things you must remember as you are working on these pages with the pictures set up in various ways, is that they are done using a "Table Format." On this page, the computer thinks it is printing a table with outer borders taking up 95 percent of the page width. The "TR" codes tell the machine, "We have a new row here, between these two TR markup codes." The "TD" codes define the table cell entries; on this page we have told the computer the cells are the same width as the entire table. Then, when we list the "IMG SRC" element, we tell the machine that text should be aligned either to its right or its left, by using the "ALIGN" code. As the text reaches the bottom of the picture, if it is that long, it will wrap around the picture and go all the way across the page. Notice how I inserted two break codes to make sure a blank space will appear. If you were not within a table format, you would use the paragraph code to start and end each paragraph. Within the table, I have found the break code works most consistently for that purpose. For these first two items, I have used a phony name for the images. This causes the graphic to appear on your screen looking like a broken picture frame. Because I put in the "ALT" code with a name for the picture, when no image is available, or if someone looks at your page with a text-only browser, then the name of the picture, or whatever you put in the quotes after the ALT code will show up. For the next examples, I will use some real pictures, to demonstrate how the text wraps around them.

Anasazi Ruins at Mesa Verde National Park - #1 -- See? You can start typing your own text over what I have written here, then save the file as something unique to you, such as "mypic1.html" Try it just on these next couple items that have pictures of mine displayed! Delete what I have written, and type over it. This is just a demonstration right now, so don't worry about what you type...you could type "Mary Had a Little Lamb," or "Little Bo-Peep," just to see how this system works! Then save the file with a different name than I have used, to a folder [directory] on your hard disk. Next, while in your browser, open that HTML page. In both Netscape and Microsoft Internet Explorer, this is part of the "File" pull-down menu. Both will let you browse to find the file you have just saved. When it pops up, then scroll down the page to this paragraph, which you have just changed, and see how simple it was to do this!

Anasazi Ruins at Mesa Verde National Park - #2 -- Now, remember, you were supposed to type something different in place of this text also! If it is just short, like this, then it will start at the top edge of the picture, and just run down until it ends, leaving lots of blank space below it at the edge of the picture. Therefore, for pictures you wish to post that have only a brief description or heading, you may not wish to align text to the left and/or right. Some of the other sample pages show how to place the desired text above, beneath, or centered at the side of the picture. This page only shows pictures with text along the sides of the pictures. Of course, you could make them all on one side or the other, by simply changing the ALIGN codes to be all the same. If you were to do that, then you could substitute a heading code for the "IMG SRC" code that produces the little grove of trees graphic. For example, the heading for this picture could be entered where you see the IMG SRC entry above. That would tell the computer that it belongs in the previous table cell, so it would appear above the picture. If you were to delete the "CENTER" codes, then the heading would be at the left. (Remember, now: you will have to print out the source code to see all the coding entries I am speaking of here. The HTML page on your browser will not display the source code. It's best to look at them both when you are working with this system.

Anasazi Ruins at Mesa Verde National Park - #3 -- Why don't you experiment with changing things around a bit on this page? It will give you some good practice in cutting and pasting, saving your results, and then looking at them in your browser. Once you have looked at the page results once, then the next time, just click the mouse on "Reload," or "Refresh," or the equivalent for your browser, to see the updated page. Remember, though, the file must have the .html or .htm suffix, and must be saved as a plain text file. And don't worry, you cannot change my original files on these Geocities pages; only I can do that, due to built-in security features. When you experiment with these sample pages on your own system, you are just editing "drafts." Another suggestion would be to save my picture files in your folder also, so they will appear in your draft. Then use a couple of your own pictures for the first two phony .jpg file names I used in the first two items. That will give you some practice in putting pictures in their places also. If you are anything like me, then you will go through many drafts and revisions before you have it worked out the way you want it to look. Sometimes it helps to look at your results on some different computers connected to the internet to see if a different browser produces results you can live with, or if you need to make some changes so it will appear the way you want it to look on both Netscape and MIE browsers.

Anasazi Ruins at Mesa Verde National Park - #4 -- I have set this page up to handle perhaps too many pictures. When you set up your .jpg images, you will have to learn how to use your graphics program. In Corel ® PhotoPaint, you can "resample" a bitmapped image and then save it in a medium to low resolution .jpg format, and reduce the size of the file from 150-290 Kbytes down to 6-10 K in size. The smaller file sizes will allow a page with several pictures to load in a reasonable time. However, if you use high resolution, uncompressed images, such as bitmaps (.bmp) or (.tif), that result in very large files, then people checking out your page will simply go somewhere else, rather than wait for the huge files to load.

Meteor Crater National Historical Site -- Okay, okay! This is the last picture on this page! In line with what I have said above, all the images I used on this page have been resampled on my photo/graphics program, and reduced to the lowest possible resolution. The instructions say that for graphics that will appear only on a computer screen, the lowest resolution is still a tad higher than the computer screen can see clearly anyhow, so not much detail should be lost. On the other hand, if you want to print a color photo from the image, the lower resolutions will not produce as fine a print as you get from your friendly neighborhood photo shop.

If you wish, you may go to the top of the page and start over.

To return to the previous page, use the Back Arrow of your browser, or you can click on your right mouse button to find a back menu. This link will get you back to the main [INSERT NAME OF YOUR MAIN PAGE] .