Introduction Text Links Images Backgrounds Tables Colors Utilities and other tips

Fun with Pixels!! Alright, here’s where we deal with image insertion and stuff like that there. Yeah yeah, you could just use the ‘Avatar URL’ box provided, but that’s good for only one image and some people want more than just one image. Also, it automatically loads it to the left side of the screen, some people want a different orientation….or resize the picture (yes, you can actually do that! WOW! It’s MAGIC!!) What you have to understand is that there is and ever will be only one tag to do the job…the legendary <img> tag! (insert dramatic music here) It’s actually a rather nifty little guy to get to know. A few things you need to know about using this tag are listed just above the table containing the attributes, values and what they do. A few things ya oughta know… Alrighty, we’re talking about images here…not other html documents, so when you go to put in the url for an image, make sure it ends in the proper extension (.jpg, .gif, .bmp, etc) Putting in something that ends in .html will get you a big fat little tiny red X where your pic should be. If all you have is an HTML url, right click on the image and select ‘View Image’ from the drop down menu. That SHOULD give you the url for the picture you’re looking for. If it doesn’t work, then you may want to consider using a regular link to the html page that holds it. There are a number of image types out there, the two that are used most of the time (and work the best for HTML) are .jpg and .gif. There are a few reasons why you may want to go with one or the other. .jpg This is a good extension for large images, full of color and detail. They usually are bigger files, needing more time to download (depending on your bandwidth and the server’s). If you have a picture that’s got a LOT of color (not just 256 colors, we’re talking millions here baby), then you’ll want to go with .jpg. The thing about a .jpg file is that it can’t handle transparent areas, meaning it will show up as a white blotch if you were hoping for it to show through to the background. .gif The .gif type is good for smaller, less detailed images. They take up less hard drive space and are quicker to download. They can’t handle as many colors, maxing out at 256. They CAN however contain transparent areas. That makes gif’s good for things like buttons, banners, and other assorted ‘b’ things. Another cool thing about gif’s is that they can be animated. What happens is you have multiple images layered atop one another. When the file says so, it moves from the first image to the next It’s recommended that you use only those two when making a webpage. However, there are those who like to use the image type png. (I know a few who do) While this is all well and good, it’s a MASSIVE file type to send. It takes a looooong time to download BUT…the detail and color it allows is quite remarkable. So even though it’ll take forever for you to grab the picture, it will be worth it. Now, on to learning how to use <img>! Tag Attribute Value What it does <img src=" width=" height=" alt=" border=" Hspace=" Vspace=" (insert pic url here)"> (desired width)"> (desired height)"> (desired text)"> (desired border size)"> (desired space)"> (desired space)"> tells the browser where to look for the image. tells the browser how wide to display the image itself. tells the browser how tall to display the image itself. alternate text in case the browser cannot display the image. tells the browser to display a border around the image and what thickness to make it. tells the browser how much space to put on either side of the image. tells the browser how much space to put above and below the image. Alright, so let’s break it down and give you lazy blokes (that’s right, I called you all lazy, and I called you blokes! So what?? Wanna fight about it?? RAAR!!) a good example of each. Remember, you can use more than one attribute in a tag, just make sure you’ve got the right attribute for the right tag. SRC This is pretty simple. When you put in an <img> tag, you must, and I mean MUST include this attribute, otherwise, ya know, what’s the bloody point?? Src is short for ‘source’ (duh…right?) meaning the source location of the image, where it is in the digital word (no, not like in Digimon!! On the net you freaks!). It’s basically using the actual image as a reference, slipping it into the document for easy viewing (how thoughtful!) You have to be careful to get the url right otherwise it won’t display the image. I suggest you copy and paste the url, not even worrying about length or case (since the server might be case sensitive, leave it the way it is!) Once you have that, make sure it’s got ""’s around it so the browser knows when the url stops and the tag continues. <img src="Whatever image url you want goes here!"> For instance... <img src="rainbow.gif"> yields Width and Height This is one of the niftier things about this tag. You can actually stretch or shrink your picture however you like. This is where math comes into play. You need to know how large your picture is in pixels (the individual dots that make up an image on your screen) before you can do anything about changing it proportionally. You can’t use percentages, it’ll really screw up your pic (believe me, I know, I’ve tried!) The original dimensions of the image are 60 pixels by 60 pixels. I decided to change the size by 200% and then 50% (double then half). See the code below for how it was done. <img src="rainbow.gif" height="120" width="120"> yields... while... <img src="rainbow.gif" height="30" width="30"> yields... Now you don’t HAVE to put your dimensions in the order shown…it could be ‘width’ THEN ‘height’ just so long as you’re comfortable and consistent. Consistency is CRUCIAL in ANY form of coding, not just HTML. This is something I try my hardest to maintain. If you stay consistent, then you’ll have less trouble making alterations later on. A small note on altering your picture’s size proportionally...no, you don’t HAVE to do it proportionally, you can just eyeball it or just say ‘To heck with it’ and go willy nilly (yes, I said willy nilly...you got problem wit dat?? HUH!??) However, if you just happen to be a stickler for things looking their proper shape and size like I am, then you’ve got just a teensy bit more work ahead of you. This is where your math teachers ended up being right about how you DO need to know how to cross multiply and all that lovely stuff like that right there. I won’t go into the method here, but you can skip to the last page and see where I’ve outlined a quick way to do your calculations. It really isn’t that hard. Alt This here’s a simple little tag that really shouldn’t need much explanation. What it does is when a picture you’re hoping to have loaded into a site for some reason does not load possibly because the server it’s on does not allow hotlinking...*cough*Geocities*cough*...then it will display the text you have told it to display. At least this way you know where your picture is SUPPOSED to be loaded. This is also a good way to help you debug your site. In case you mistyped the url, you can just put in a little blurb for your alternate text and it will pop up saying something like ‘Dude, you twit, check your spelling!’ if you desire to put something so rude in your site. Personally, I haven’t used it all too much but I probably should start. It’s not really that important but it is a little helper there for you in case you mess up or something goes wrong between the page and picture. It also helps to keep that nasty little red X from showing up if your image doesn’t load. <img src="ranibow.gif" alt="I intentionally misspelled it so you could see this text" border=1> will show you this... So as you can see, it can be quite handy to have in place. One could even put in the url that’s been used to link to the image so it can be easily spell-checked. Border Ahh, yes...borders, like the one between the US and Canada...only a bit easier to set up. A border as you all should know, is a line that surrounds the image area to show everyone where the image ends and the background begins. This isn’t too hard to grasp as well. All you do is put it in, then tell it how thick to make it. There’s no limit on border size since it relies on pixels. Just use common sense to determine how big you want it. <img src="rainbow.gif" border=5> will yield... while... <img src="rainbow.gif" border=25> will yield... If you don’t want a border, that’s easy, just don’t put the attribute in! But if you really want to ENSURE that there is no border, just put ‘0’ in for the value. No-problem-quick-and-easy... Hspace and Vspace These are two handy attributes in case you just feeling like pushing text and pictures all around on the page. Hspace will add space on either side of the image OUTSIDE the border (if there is one). It will add space EQUALLY...you cannot add space to one side with these attributes. There’s a way to do that but it’s tricky so we won’t go into it here. It IS however explained on echoecho.com. (here’s the page it’s on). <img src="rainbow.gif" Hspace="30" Vspace="10"> will yield... That’s pretty much all there is to image insertion. It wasn’t that hard was it? NAAAAAAH!! But there is something I need to repeat...CLOSE YOUR TAGS!!! DO IT!! DO IT NOW!!! OR I SHALL SMITE THEE!! Okay so I won’t really smite you, but close your tags just the same!! It could really mess up your page REALLY BADDLY. I’m serious...I REALLY can’t stress this enough!! You’re probably gonna read this on every page but so it goes...there’s a reason why I’m repeating it ya know!