|
|
So is it looking better yet? I'd make an example page but I think that can wait until the end of this "lesson" don't you? If you see the header at the top of this page as plain old Arial or plain text that should show you how carefull you have to be in choosing a font. It should be in Lucida Handwriting , IF you happen to have that font installed on your machine (just seeing if you were paying attention to what I said earlier).
So things are looking better but you're still not getting to insert those pretty pictures you like so much? Well, first let's deal with some of the basic rules of pictures in pages.
The bigger the image (in file size), the longer it takes for the page to load up (fully show up in your browser). Since most people have little patience, keeping th load time to 30-90 seconds is not too bad. If you make the load time too great people will wander off instead of waiting for your page to load.
Cluttering a page with images that don't apply to your theme is a waste of load time and a general pain for people viewing your page, keep it streamlined wherever possible. The first clue that a viewer has to your level of experience in page making is the number and quality of your images, too many show you're a beginner.
Wherever possible, insert thumbnails (smaller versions) of your pictures leading to a independant page so people visiting only have to see the full sized images that THEY want to see.
Make an effort to use the most compressed versions of images you can, there are several very good resources out there on the net that do it for you if you don't possess the software to do it yourself.
Think before you insert.....does this graphic have a real place on my page? Is there a reason for it being there?
If you follow these basic rules of images you really can't go wrong! I realize that I may sound like a hypocrite (since I did the very same things I just told you not to do on my first pages) but, HEY! learn from other people's experience. Now I hope you found a few image files to try out on your page, I can't do everything for you. In case you haven't brought your own I've decided once again to supply some <sigh>.
There! That gives you something small to start with anyway. Remember to save to disk (either hard drive or floppy) choose the "Save Picture As" option when you right click on the image. Save the picture in the place you want it (remember that to view or hear ANY file inserted on a page, it must be in the same location as the page file). Now that you have some files, let's get to work!
First we'll start with something really simple, the colored bar up there would make a really nice separator between your title and your body text wouldn't it? It certainly looks classier than the underlining at the top of this page doesn't it? Inserting that little bar couldn't be simpler, all we need to do is insert a tag to tell the page that it's there. To do this we simply have to type: <IMG SRC="colorbar.gif"> (assuming that you saved it with the name it already had) right under where your header tag is. Try it and see what happens. You notice that it doesn't align your image in the center of the page? Oops, you didn't tell the tag to do that! A nice simple fix is to simply put a center and end center tag immediately before and after your image tag to tell your browser that the image should be centered. When you're done it should look something like this: <CENTER><IMAGE SRC="colorbar.gif"></CENTER> . Save your changes and see how that works.
Is your bar nicely lined up now? Would you like the bar wider or narrower? All size changes need to be put into the tag to which they refer and it will take you a while to figure out exactly how wide your page is going to be, but remember ALL height and width references are in pixels (dots), not in inches. Let's make our bar a little shorter, say just 500 pixels long. To do this all we need to do is tell exactly how long we want it in the tag that refers to the image. We do this by adding WIDTH="500" after our reference to the colorbar in the tag. This means our new tag will read <CENTER><IMG SRC="colorbar.gif" WIDTH="500"></CENTER> .
One little last picture and I'll let you play with inserting your OWN graphics
on your page. If you want to align your pictures somewhere other than the center
of the page (say to the left), you'll have to put a reference to alignment
within your image tag. Let's do this with the skull since it's easy to deal with
sizewise. We're going to put one to the left side of our page under our title
first by adding
ALIGN="LEFT"
after a space following the name of our image within a new image tag. The end
result should look like this:
<IMG SRC="skull.gif" ALIGN="LEFT">
. After you're done the image should align to the left and the text should wrap
around it. You can also make the same affect by lining the skull up on the
right. Take a look at
THIS
With this lesson you should have learned to manipulate your images fairly well so I geuss now you might like to learn how to insert links to some of your favorite places on the web into your page, maybe even a link to your Email address. If so please move on to HERE .
