|
|
| HTML - Images |
tutorial by Chris |
Alright, you need pictures now. Everyone should have pictures, but
not to many. That can be annoying and lag someones computer. Just
remember to keep those millions of funny gif images to yourself,
especially if there not transparent! Just use a few for examples
or page titles or whatever, but try not to go overboard.
Lets start with a basic tag used for images...
<![CDATA[
<img src="yourpicture.jpg">
]]>
IMG is the tag to start an image, then SRC= tells the computer to use
whats coming up next as the image. Then the part in the quotes is your images URL.
Yep thats all there is to images. Pretty simple huh. Now lets see what
that stuff means. the IMG tag is used for images. Its kinda like links,
b/c it seems thats all there should have to be for images right? wrong,
theres much more...
Theres stuff like height and width and image borders(when linking them).
Mouseovers have an extremely wierd effect on this tag also. Theres
actually not much to images. One thing significant is that there is no
ending tag like /IMG b/c all the info is within that tag. Kinda KrAZy huh?
Lets look at linking an image. If you know how your using your noggin
pretty well, if not your probly not a computer geek 24/7.
Its the same way as a regular link, but instead of typing in text
just put in the image tag, EASY!!!
<![CDATA[
<a href="http://www.yahoo.com">
<img src="yourlogo.gif">
</a>
That would result like this...]]>
Hey whats up with that freaky border around the image? AHHH you
noticed right? For some reason browsers put a border around an image.
To get this border off we can use another attribute in the IMG tag!!!
you'll never guess what the attribute is...
<![CDATA[
<a href="http://www.yahoo.com">
<img src="yourlogo.gif border="0">
</a>]]>
I wonder if my border dissapears? lets see...
YAY!!! Easy to remember isnt it? About half the time you link an image you
will forget to do that though the first time heh. Ok, one more main
thing thats actually not improtant if you make the image the size you
want in the first place. Resizing images by using this also distorts
images b/c they dont resize by proportion. Anyways, here is how to
resize an image.
<![CDATA[
<img src="yourlogo.gif" height="100" width="100">
]]>
That makes the image height 100 pixels and the images width 100 pixels.
These values dont have to be the same and frquently arent unless the
image is a square shape. To show you a resized image i will make my logo
100 by 100 pixels (i dont recommend resizing in HTML but here goes)...
Kinda goffy looking isnt it? With all this useless useFUL knowledge
we can move on to the thing no one understands and thinks is very hard!!!
AHHHH its the dreaded TABLES, relax and dont have a heart attack.
Next lesson is Tables
|
|
|
|
