|
|
"We don't need more strength or more ability or greater opportunity. What we need is to use what we have!"
|
Email Me
Design by
Serenity's Graphics
and My Arts Desire
|
|
Basic HTML: Tutorial #5
IMAGES -- At this point in your HTML career, it's a good idea for you to place whatever images you are going to use in the same place as your web pages. That means place the image right on the same floppy disc, or in the same hard drive directory, as the page that will call for it.
There's more on that coming up in Tutorial #6. But for now, just store everything together in the same place.
|
Placing An Image On Your Page
The command to place an image is constant. You will use the same format every time. Now might be a good time to talk about where to store everything because you're starting to call for additional items to fill up your home page. Until now, all you did was put text on the page. Now you're going to place an image.
|
|
|
|
Below is the format for placing an image:
By replacing "image.gif" with "thankyou.gif", one of my own graphics, you get this . . .
Here's What's Happening:
* IMG stands for "image." It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image Tag.
* SRC stands for "source." This again is an attribute, a command inside a command. It's telling the browser where to go to find the image.
Again, it's best for you to place the images you want to use in the same directory as the page. This way you can call for the image by name alone. If you start to place your images all over the place, you'll have to start adding directories and sub-directories to the SRC attribute. And at this point, that is way too confusing. Just place the image in the same place as the HTML document that will call for it and then call for the image by name alone. You can get fancy later. Right now, let's just get it to work.
* image.gif is the name of the image. Notice it's following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).
|
|
What To Write For The Link?
There are a couple different schools of thought on this. One suggests that what you write for links should be quite blatant. This includes text like "Click here for this" or "Here's a link to . . ." The other states that since the hypertext links will be blue (or whatever color they're set to), that the links should be just another word in the text set up as a link.
I believe a little of both. I'm of the opinion your readers should be allowed to have a very easy time of it all in terms of navigating your Web pages. But it's your page and you make that decision.
|
|
Image Formats
There are three basic formats you will find on the World Wide Web. Each is denoted to the browser by a different suffix. Remember that "name.suffix" discussion from Tutorial #1?
* .gif This is pronounced "jif" or "gif" (hard "G") depending on whom you speak to. I have always said "gif", similar to gift. This is an acronym for Graphics Interchange Format. The format was invented by Compuserve and it's very popular. The reason is that it's a simple format. It's a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television's picture is created much the same way. Browsers can handle this format quite easily.
* .jpeg or .jpg (pronounced "j-peg") There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format. The format is unique in that it uses compression after it's been created. That's fancy computer talk that means that when the computer is not using a .jpeg image it folds it up and puts it away. For example, if the picture is 10K bytes when displayed, it may be only 4K bytes when stored. Nice trick, huh? It saves on hard drive space, but also tends to require a bit of memory on your part to unfold the image.
Someone always writes to me to tell me that .gif images also use compression. Yes, they do, but only when they are first created into that format. After that, no compression. JPEG, on the other hand, uses compression throughout its life to fold up smaller than it really is.
* .bmp (pronounced "bimp") This is a "bitmap". You will probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A bitmap is an image that a computer produces and places for you. A counter is an example.
Even though Internet Explorer will allow you to place an image as a BMP, I wouldn't. No other browsers will be able to quickly display it because they are SO LARGE. Stay with .gif, .jpg or .JPEG for quicker loading images.
|
|
Where Do I Get Images For My Page?
They are literally everywhere. Some sites allow you access to a few images for free, and there are other sites out there that offer a lot more. Plus, since you've been surfing, you've seen hundreds of images already.
If you see something on someone's page that you really like, ask to use it. Don't just take it. That's not right and could be against copyright law. Ask You'll probably get the image. In no time you'll have a slew to use on your page.
|
|
Activating An Image
Okay, this gets a little fancy. In Tutorial_#4, I showed you how to create a hypertext link. What it did was create blue words on your page so someone could click on them and then jump to another site. Well, here we're going to set it up so an image becomes clickable or "active." The viewer would click on the image, instead of on blue words, to make the hypertext link.
I'll make a link to my home page using the image above.
Here's the format:
<A HREF="http://www.serenitys-treasures.com">
<IMG SRC="http://www.serenitys-treasures.com/colors/thankyou.gif"></A>
Look at it again. See what happened? I placed an image Tag where I would normally have placed words. Here's what you get with that format. Lay your pointer on the image, but don't click. You'll see the entire image is active:
Neat, huh? But what's with that new border around the image? That's what happens when you activate an image. It attempts to turn blue, or whatever color the page is set to, like the wording it's replacing, so it places what's known as a "border" around the image. Some people like it. I don't, and I know how to get rid of it.
<A HREF="http://www.serenitys-treasures.com">
<IMG BORDER="0" SRC="http://www.serenitys-treasures.com/colors/thankyou.gif"></A>
See what I did? I added an attribute that denoted that the border should be 0. You can go the other way too if you'd like. Make it BORDER="55" if you want. It'll just make a huge border. Note that the number 0 is in quotes. It is an attribute, after all.
Again, lay your pointer on the image without clicking. You'll see that it is active but doesn't carry that annoying border.
And that brings Tutorial #5 to a close. Tomorrow you'll deal almost exclusively with attributes in order to manipulate your images. You'll truly impress your friends with this one.
You Can Do This!
On to Tutorial #6
|
|
|
