|
|
Welcome back! Now we're going to get into something I'm sure you've been waiting for -- pictures on the net.
They say that a picture is worth a thousand words. I don't rightly know that's true or not, but it's sure a lot easier to show a visitor a graphic than it is to describe it in painstaking detail. More interesting for the viewer too. We'll look at the basic image tag and a couple of its more useful attributes here shortly. First we need to talk about images in general so that when you try to insert your own, you're not met with frustration.
Images come from a variety of sources. Only your imagination limits you. You can create them in a paint or draw program, scan them into the computer from a magazine or photo, you can down load them from a digital camera, or digitize them from a video --- or just plain get them off of another web site on the net. The only thing that matters, really, is that they reside in your computer's memory somewhere -- it's not important how they got there -- not right now anyway.
There is also a range of types of images. Still shots, movie clips, animated gifs and so on. For the purposes of this tutorial, we'll stick with the still pictures since that's the most common.
To complicate matters further, there is a wide, wide range of image formats -- all greatly dependant upon the means in which they were created or came to be in a computer somewhere. However, when we talk of web pages and the internet, two formats stand out as being the most commonly used. The GIF image and the JPG [ or sometimes JPEG] image. These two are the ones you want to use because they are supported almost universally [I'm sure there's a browser out there somewhere that doesn't support one or the other, but I don't know about it].
You will probably use both types [formats] of images because, like everything else in the cyber-world, each has advantages and disadvantages associated with it. Let's discuss each briefly -- very briefly:
The GIF Format has been around for quite a while. Originally created by Compuserve to transmit images over the internet, the gif format takes the image and compresses it but retains all of the image information. Because of this, gif images are generally of good quality -- assuming that the original that the image was made from was of good quality as well. Two problems pop up with gif images though. First, you're restricted to 256 colors. That may seem like a lot, but for photographs, it's not nearly enough. Each image has a 'palette' of colors, that is, the 256 colors that are used in the image. This palette is loaded into your computer based for the first image read. Should you have several gif images on the web page, all with different palettes, certain colors will be 'lost' in the second, third and so forth images. The browser will try to make up for this by 'dithering' the image. This means, it can't produce -- say orange, so it interspaces red and yellow dots to fool the human eye into thinking it sees orange. This is fine so long as all your images have similar palettes, however, if you have even one image that is completely different, quality suffers badly. To add to this, you can never be quite sure which of your images will load first -- so you can't select one with the most common palette to 'set the standard' for the rest. It's a crap shoot each time the page loads. All that being said, the gif is an excellent graphic format for the web and best used for drawings and poster like pictures. Gif images are also capable of being animated or made 'transparent' which, tastefully used, can add interest and sparkle to your page.
JPG Format images, on the other hand, can reproduce the entire spectrum of available colors and can be made into a much smaller file size than a gif. This is a consideration since you will want your web page to load as quickly as possible on a visitor's browser. A 50k gif image can be compressed to less than 5K if turned into a jpg. The trade-off is quality of the image. Jpg's compress an image by 'throwing away' parts of it, then rebuilding the picture when it's called up. The quality of the image depends much on the amount of data which is thrown away during the compression process. The good news is, you can control how much the jpg process compresses the image, thus saving it's information. Of course, this results in a larger file size and longer downloading time.
Keeping all this in mind, and using both formats on your page, you will want to look carefully at any image you create. If it's a photograph or something else which has tons of different colors in it, the jpg is probably the better choice. If it has sharply defined lines [ such as a poster painting does ] and not a lot of colors, the gif is a better choice. Factored into this is the image size and the amount of space you have on a server --- and the time it will take to download a large [ greater than about 30k ] image.
Now, the above is assuming that you are creating the graphic. If you get it from somewhere else ready made, you may not have much of a say in which format to use. The formats can be changed back and forth in a paint program, but then once you change a jpg to a gif image, you've permanently lost all but 256 of the colors -- changing it back will not restore them.
HTML, in keeping with simplicity, uses the <IMG> tag to place a graphic on your page. This tag does not have an end command counterpart, so don't try to use one. The <IMG> tag does have several attributes, one of which you must use [ if you intend to get the image to display at all ]. So let's list 'em:
The <IMG> tag attributes are:
Let's dive right in. The SRC, as I indicated above, is a mandatory attribute. If you don't specify this, use a file name that doesn't exist or don't properly indicate the address where the image is located [more on this in a moment], no image will be displayed. You will have a 'broken link' -- the 'Doh' image, such as the one you see just below.
Too many of those, and the surfer quickly loses interest in your page. The SRC attribute tells the visitor's browser where to look for the image. Remember, the image is not on your document !!! The <IMG> tag merely tells the surfer's browser where to find it. It is a file all of it's own and must be located on the world wide web somewhere. This means, you can't have it only on your hard drive and expect visitors to be able to see it [ you'll be able to see it though, because it's on your computer ] -- so be very careful.
What's that you say? You want to see an example? Good idea, let's do one.
In keeping with the web page we are building [ you are building it with me, aren't you? ] I will use a picture I have of Oscar the Turtle, appropriately called 'turtle.jpg'. Making sure that the jpg image file is on my server, I simply use the <IMG> tag to call it -- here's the code:
Images are always displayed in a browser starting on the left side and working to the right --- unless you specify otherwise. Remember, we can center the image as well using the <CENTER> set of tags. Take a look.
Let me illustrate this by pulling another image from a different web page of mine -- located in a different part of the server. Here's the code:
Depending upon exactly where the image is located, you can get away with listing only part of the address [URL]. But since I don't want to confuse you, just use the entire address as above -- that always works.
Fine -- great. Now let's continue to build on our 'Oscar the Turtle' page and include the picture I've shown you. The picture will reside in the same directory as the HTML document, so all we need do is to list it's file name ["turtle.jpg"] for the SRC. We'll put Oscar's picture right after the first paragraph. We'll also put the image in it's own paragraph because that will preclude some possible unplanned results [ which I'm not going to go into now ]. Let's look at the HTML document we're building:
<HEAD>
<title> My Pet Turtle, Oscar </title>
</HEAD>
<BODY>
<CENTER><H1>Oscar, the Painted Turtle</H1></CENTER>
<FONT SIZE=+3 COLOR="BLUE">T</FONT>here seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic <FONT COLOR="LIME">palm tree</FONT> stuck in the center], and the <FONT COLOR="#FF3333">dried insects</FONT> to feed them with.
<P><IMG SRC="turtle.jpg">
<P> Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.
<P> Oscar was purchased at a local pet shop here in Korea for the tidy sum of 4,000 won [ that's about 3 dollars, U.S. money ]. He was just a little tyke about the size of a quarter when I bought him and brought him home. I've alway's enjoyed strange and unusual pets and you don't get much stranger than a turtle.
<P> Oscar is a true turtle, as opposed to a tortoise, and spends all of his time in the water. His home consists of a 55 gallon aqarium -- completely filled with water, several rocks to hide under, and some plastic plants. These latter are more for my benefit than his, since he can't eat them [ though he tries ] and I doubt that he appreciates their asethic value.
<P> I've had Oscar for about three years now and am amazed at how he's grown. At the present time he is larger than a grown man's hand -- and still growing. Oscar will eat just about anything, but his favorite food seems to be small green frogs that abound around my neighborhood. Fish are also welcomed, and I can no longer keep tropical fish as pets along with him as I used to. Sooner or later he'll eat them.
<P> Turtles are interesting in several respects -- one being the length of time they can remain completely under water. And so forth and so on ......
</BODY>
</HTML>
Here's what we've got now:
Fig 6
As a matter of fact we can. We can do this in two ways, the first being the much better choice for reasons that I'll explain.
Method A: We load the image into our favorite paint editing program and permanently resize it there. Doing this actually does make the image itself smaller [or larger]. Why is that important? Glad you asked.... because if you have a large image, say the size of an 8x10 photograph which is 200K in size, it's going to take a while to download on your visitor's browser. He may become impatient and leave your site. Merely squeezing the displayed image size down [as we'll discuss in Method B] has no effect at all on the file size. So if you took your 8x10 inch image [which we'll say is 200K in size] and reduced it to a 3x5 image using Method B, the image is still 200K in size -- you've only changed the way it displays.
I recommend that you actually reduce the image in a paint program, thereby decreasing it's file size as well [in our example above, say from 200K down to 60K] and using the smaller image on your page -- but the choice is yours.
Reducing an image in a paint program is beyond the scope of this tutorial. If you wish to learn to do this, consult the manual provided with whatever program you're using. So now let's look at Method B.
Method B: Here we use the HEIGHT and WIDTH attributes of the <IMG> tag to tell the viewer's browser how to display the image. But before we get into exactly how to do this, let's talk about some principles first.
Images on a computer or webpage are measured in units called pixels [picture elements]. How many pixels there are to the inch (expressed as DPI) and how many there are total, on your screen is a function of several things, the most important being your monitor and the system settings you are running. For an example, a typical 14 inch monitor will usually be 480 pixels high by 640 pixels wide. This number should sound familiar to you.
The picture quality and it's depth of detail are determined by the pixel density -- that is, DPI. The size of the image is determined by the total number of pixels in the images [of course matched to the DPI].
Okay. So much for the background, how do we make an image smaller using the HEIGHT and WIDTH attributes? Let's use our "turtle.jpg" example and squeeze him down by plugging some values in. Here's our code:
And the result:
Hey! What happened?! Yes, the image is smaller, but it's distorted as well [note that it looks like it was compressed from side to side].
Indeed it sure has been, and this is our fault. Here's the reason. You see, each image you have, make or acquire is a certain size [measured in pixels]. I just reduced the "turtle.jpg" image without regard to the ratio of height and width of the original image. Doing that, HTML 'forces' the entire image to the new size and hence, it looks distorted.
So how do we do it the correct way so our image looks just like the original, only smaller? Well, you have to determine the size [again in pixels] of the original and use that ratio of height to width to come up with your new values. Confused? Let's work our "turtle.jpg" example.
Using a paint program [I use Corel Photopaint 6] you can find out what the actual size of any image is. In this case, the original "turtle.jpg" is 240 pixels high and 320 pixels wide. Now that we know this, we can use 320/240 as our width to height ratio. Doing the math, we find the ratio is 1.33. In other words, we should make the width of the image 1.33 pixels for every 1 pixel in height. As always, an example makes this most clear.
We want our new image to be 150 pixels high. So, it's width will be 150 x 1.33 or 199.5 pixels wide.
You can't stipulate a fraction of a pixel, so we will either round the width up to 200 or down to 199. It won't matter; the human eye will not pick up such a small discrepancy. So, here's our code:
And the result:
Now let's update the page we are building on Oscar.
<HEAD>
<title> My Pet Turtle, Oscar </title>
</HEAD>
<BODY>
<CENTER><H1>Oscar, the Painted Turtle</H1></CENTER>
<FONT SIZE=+3 COLOR="BLUE">T</FONT>here seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic <FONT COLOR="LIME">palm tree</FONT> stuck in the center], and the <FONT COLOR="#FF3333">dried insects</FONT> to feed them with.
<P><IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200>
<P> Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.
<P> Oscar was purchased at a local pet shop here in Korea for the tidy sum of 4,000 won [ that's about 3 dollars, U.S. money ]. He was just a little tyke about the size of a quarter when I bought him and brought him home. I've alway's enjoyed strange and unusual pets and you don't get much stranger than a turtle.
<P> Oscar is a true turtle, as opposed to a tortoise, and spends all of his time in the water. His home consists of a 55 gallon aqarium -- completely filled with water, several rocks to hide under, and some plastic plants. These latter are more for my benefit than his, since he can't eat them [ though he tries ] and I doubt that he appreciates their asethic value.
<P> I've had Oscar for about three years now and am amazed at how he's grown. At the present time he is larger than a grown man's hand -- and still growing. Oscar will eat just about anything, but his favorite food seems to be small green frogs that abound around my neighborhood. Fish are also welcomed, and I can no longer keep tropical fish as pets along with him as I used to. Sooner or later he'll eat them.
<P> Turtles are interesting in several respects -- one being the length of time they can remain completely under water. And so forth and so on ......
</BODY>
</HTML>
Fig 7
You may be thinking that the only time you need to use the height and width attributes to the <IMG> tag is when you want to resize your images. That's true, however not desireable. You should always use them for all your images, both large and small, whether you resize or not -- and this is why.
Remember before I told you that the web browser loads in the sequence in which you have information in the HTML document [although it may jump around loading images]. That is, top to bottom, left to right. Browsers must allocate space on the page it is building for display based on information you provide. If you provide none, it will allocate space based on the actual size of the image -- but not until it reads the image itself. That means, if you have several images of 30k or more and one or some of them are towards the top of the document and the top image does not load first -- then your visitor will sit and look at a blank or partially complete screen until his browser decides to load the top image.
This can be a slow and frustrating process for the surfer and is easily remedied by you. If you provide the HEIGHT and WIDTH attributes for all images, the browser reads this info, reserves the space, then moves on and continues loading and displaying the page -- no matter when it decides to load the upper images. Adding these two attributes is not difficult and is good web page design practise. Soon it will become second nature for you.
Why on earth would anyone use such a thing? Well, not every person who visits your page will have the graphics enabled [you can disable graphics load in your browser]. They do this to speed up the load time of the pages they visit. Additionally, some of the older browsers which are still in use are not capable of displaying images. In this case you'll want to provide a text description of what they're missing.
More importantly, if you're using images as links [we'll get into this in the lesson after next] and you haven't used the ALT attribute, any visitor without a graphics capability, or who has it turned off, will not be able to see your link. The attribute is painless to add, costs nothing and will help some of your viewers. Besides that, it's just plain good web practise to use it. The code looks like this:
<IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=150 ALT="A description of your graphic here">
Here's an example of Oscar's page with the graphics load turned off. The first figure has no ALT statement, the second does.
Fig 7a
Fig 7b
One other thing the ALT attribute does. As you go about revising your HTML document [and you will many times, believe me], the description of the image in the code aids you in remembering what is where on the page. Add it in. You won't be sorry.
Remember earlier in this lesson I told you that an image, unless you're centering it, will always start at the left margin. If you have two images next to each other and they don't exceed your screen size [or that of the viewer's browser], the second will line up on the same line next to the first. Let's see what I mean. We'll just put two copies of the "turtle.jpg" next to each other on the same line. Here's the code:
<IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200><IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200>
Here's what we see:
That's fine if you want your images to display like that -- one right after another, but what about if you'd like your image to be on the right side of the page? Also, if you place an image within a paragraph, the text will 'break' and you'll wind up with a big ugly gap in your golden prose. Let's look at what I mean. We'll use the first two paragraphs of Oscar's story and his picture to illustrate. The code is below:
There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time<IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200> when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.
<P> Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.</P>
Notice where I put the <IMG> tag -- in the middle of the first paragraph. Here's how it displays:
There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.
Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.
There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time<IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200 ALIGN="left"> when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.
<P> Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.</P>
It shows up like so:
There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.
Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.
There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time<IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200 ALIGN="right"> when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.
<P> Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.</P>
Here's how it looks:
There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.
Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.
There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time<IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200 ALIGN="left"><IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200 ALIGN="right"> when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.
<P> Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.</P>
And how it shows up:
There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.
Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.
Using this tag stops the wrap at the point of insertion, beginning the next text item or image below the 'aligned' image. As always, this is best understood with an example. In this case, we'll have Oscar's image in the same place in the first paragraph and aligned to the left. But we want the second paragraph to begin below the aligned image. Here's the code:
There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time<IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200 ALIGN="left"> when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.<BR CLEAR=all>
<P> Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.</P>
We see:
There seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic palm tree stuck in the center], and the dried insects to feed them with.
Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.
In this case we indicated that we wanted a border or a 'frame' around our image 10 pixels wide. Here's what we see:
If you want a larger or smaller border, all you have to do is change the number -- like so: <IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200 BORDER=5>
Now the border around the image is smaller.
Make sense? Good. What's that? Why is the border black? Well the border takes on the color of the font you are using. On this tutorial, I'm using a default value of 'black' [or hex #000000]. If I want a different color of border around my image, all I need do is use the <FONT> set of tags -- just like we did for the text earlier. Let's see. We'll change the color of the border to lime.
Please Note: MS Internet Explorer does not currently support a colored border around an image.
Once again, the code:
<FONT COLOR="lime"><IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200 BORDER=5></FONT>
And our new border:
Nifty, eh? You can use colored borders to really set off your images -- just be wary, as always, about over using it.
<HEAD>
<title> My Pet Turtle, Oscar </title>
</HEAD>
<BODY>
<CENTER><H1>Oscar, the Painted Turtle</H1></CENTER>
<FONT SIZE=+3 COLOR="BLUE">T</FONT>here seems to be a strange attraction between boys and odd animals of all sorts. Certainly some of us can remember the time<P><IMG SRC="turtle.jpg" HEIGHT=150 WIDTH=200 ALIGN="left" BORDER=5 ALT="Oscar"> when every dime-store in the United States sold those little turtles, there small, round aquariums [usually with a plastic <FONT COLOR="LIME">palm tree</FONT> stuck in the center], and the <FONT COLOR="#FF3333">dried insects</FONT> to feed them with.
<P> Times change and we don't see an awful lot of those turtles any more for one reason or another. However, some countries other than the U.S. still offer these amazing animals as pets, which is how I came about acquiring Oscar.
<P> Oscar was purchased at a local pet shop here in Korea for the tidy sum of 4,000 won [ that's about 3 dollars, U.S. money ]. He was just a little tyke about the size of a quarter when I bought him and brought him home. I've alway's enjoyed strange and unusual pets and you don't get much stranger than a turtle.
<P> Oscar is a true turtle, as opposed to a tortoise, and spends all of his time in the water. His home consists of a 55 gallon aqarium -- completely filled with water, several rocks to hide under, and some plastic plants. These latter are more for my benefit than his, since he can't eat them [ though he tries ] and I doubt that he appreciates their asethic value.
<P> I've had Oscar for about three years now and am amazed at how he's grown. At the present time he is larger than a grown man's hand -- and still growing. Oscar will eat just about anything, but his favorite food seems to be small green frogs that abound around my neighborhood. Fish are also welcomed, and I can no longer keep tropical fish as pets along with him as I used to. Sooner or later he'll eat them.
<P> Turtles are interesting in several respects -- one being the length of time they can remain completely under water. And so forth and so on ......
</BODY>
</HTML>
Fig 8
This has been a lot of material to digest. Let's look at what we've learned in this lesson:
