Click if you study better
with a little "noise"...lol !
Adding Images



I couldn't decide if i should discuss adding text or images first, but here we are. There's ALOT to consider and ALOT of ways to manipulate images. We'll cover some of the basics now, and maybe some more complicated ideas throughout the pages.



Look what we have right here on this page. A nice clean looking background color, a speaker and a couple of bars. Looks nice and neat doesn't it?

Remember, the more images you use, the more cluttered it will eventually look, and the slooooower it will load.

I am often VERY guilty of this. I love using images and working with heights and widths, tables, spacing, borders and other attributes, just to see what the effect can be!

Ok here we go !
I'm going to take ONE gif and "play" with it here UNTIL, the page, gets sooooo loaded down, that it's too slow to load.
Remember, when working with images, the larger they are, the slooooower they load. You CAN cut some of that time, by duplicating the SAME image on your pages. For instance, I use that "gold bar" LOTS on my pages, one because I like it, and two because once its loaded, your WebTV doesn't have to keep "struggling" to load another image!



Ok here's an image the original size


The code for that is
<<>img src="http://URL of the image here">

Now I'll make it BIGGER



The code for that is:
<<>img src="http://Url of the image"height="200">

And now I'll make it smaller.


The code for that is:

<<>img src="http://Url of the image"height="60">

Notice that all added and changed was the height attribute. With WebTV all you have to add is EITHER the height OR the width attribute, and the opposite attribute automatically compensates. I COULD put both in if I wanted a "special effect" like this:



here the height is set at 40 and the width at 400

Or I could do this:



in this example, the height is set at 300 and the width at 100

You'll notice that the images blurred a little. They won't always do that until they get wayyyyy out of proportiion, it depends on the individual image, but I left them this way, to show you what can happen.

So you get the idea?

What else can you do? How about this?



I just put a border around it using the code below. Change the border size, by changing the number, usually from 1 to 20.

<<>img src="http://URL of the image"border="10">

ok ONE MORE for this page ( it will load too slow if we don't get going ) and we'll move on to page two of images.

How about this?



Wow huh???

Since the image is transparent, I was able to put it on a "table" and in effect, CHANGE the background of the image. The code follows.

<<>table bgcolor="whatever color you want by number or name here"><<>tr><<>td align="center"><<>img src="http://The Url of the image you selected here"><<>/td><<>/tr><<>/table>

wooo hooo ! Pretty cool huh?

Tables, and borders are GREAT tools, so let's go on to page two of images, and I'll show you what else can be done with them.
Click For Page Two


Access the logo for more sources