|
||
 
Images
Images are nice. Images take up space. Images can take time
to download and view. Images can be pretty. Images can download
fast and without problems. Images can be maps. Yup, they can.
Images can be broken and images can be ugly. Worst of all, images
can be steriotypical "please send me email"-type crap that someone
obviously stole off some chump who stole it from some other chump
who stole it from the original chump who used such an ass-ugly
picture in the first page. I wouldn't leave mail for that person just
out of principle. That's all I have to say about images. Let's get started.
The image tag is used to "call" an image file from a computer
that is storing it. If you are using Geocities then your images are
stored on their drive, and the address of that image is something
like http://www.geocities.com/SomeWhere/Jello/1436/myimage.gif.
Now, on to explaining that. Where it says
"imagename", you would put the image's name and
location (location is relative to the hard drive you are
on). If your page is on being stored on a free server,
like Geocities, then you simply have to
specify a name for the image. If your image is in a
folder, then you must specify which folder it's in in
relation to where the page is. If the image is in
folder "red" which is in folder "blue", and the image
is titled "dog.gif", the link would appear like this:
Including the height and width of an image is a very good idea
if you're serious about your web pages look. Let's assume that
you are using an image that says (rather steriotypically) "mail me".
Now let's also assume that the image comes up "broken". In that
case it would appear the default size of a broken image, which is
probably not the size of the image. Now, not only do you have an
ugly default broken image box, the image is mis-sized and no one
has any idea what the image is supposed to be in the first place.
Here is an example of a broken image with no width and height
applied to it:
See the difference? While it might be bigger and therefore uglier
it doesn't set off the layout or any text in it's area.
That's not all, though. Yup, there's more. The image height and
width tag also help the browser to load the image up faster since
it now knows it's dimensions. You might want to hit reload and test
these two images to see which one comes up first:
Can you tell the difference? I hope so, because if you can't the
whole part of that lesson is shot right to hell. And the sad part is it
should work. Hit reload and watch. I'll cross my fingers.
The width and height tags are included inside the brackets
with the rest of the image tag. Here it is:
Thumbnails are images warped by using the width and height
tags. That's all they are. If you have an image that is big and
uses up lots of load time and space, then make a thumbnail
so the visitor can click on it if they wish to see the full-sized
version. We'll use my ID picture again for this. Let's say I didn't
want to make my poor visitors with ADD or real short attention
spans or whatever have to wait, then I would do this:
Actually, let me just come clean for a second:
The alt tag is used so that broken images still serve a little
bit of a purpose. It creates a text box when a pointer goes over
an image. This will also work even if the image is not broken.
Here is an example:
Aligning images is done the same as text. The only difference with
the alignment tag for images compared to text alignment is that you
don't need a closing tag. Here is an image aligned to the right:
Centering images, like aligning images, is done the same as with
text. I'm not gonna waste any time on this. Here's the HTML, and
following that is the example:  Next topic. The default image box appears when your HTML calls an image that your browser cannot find. In most cases that means that you screwed the HTML up. Check and double-check.
Image maps are images that have "hotspots". Each of these hotspots
have a different link to them. So, by clicking on different areas of the
image you go to different places. Sounds simple. It's not. Look scary? It is. Go here and find a program to do the work for you. That's what I do usually. There isn't that damn much to say about lists. It's hard enough to try to make this stuff even remotely interesting, but lists are pretty easy to understand. They list things. That's all.
Bulleted lists are very useful. Not only are they stylish, they are
attractive. If you have a list of things or a table of contents, or
anything, you can use a bulleted list to enhance the way you display
that information. Bulleted lists have two elements in them, and the
role each element plays will make sense to you when you see how a
bulleted list comes together with the use of just a few tags. Now I will show you a list and following that list will be the HTML used to make it.
And here is the HTML for that list: Well, that concludes or section on bulleted lists.
A numbered list is the exact same as a bulleted list except
for the fact that numbers appear running up the left instead of
bullets. Even the HTML is almost identical. Here is an example of a
numbered list, and after that will be the HTML:
And this is the source code for that list:
OK. And that finishes up numbered lists.
Definition lists are lists in which the text being "definied" is not
indented, and the definition, or explanatin of that text, is indented.
They are very nice looking, and you will see them being used on a lot
of pages on the web. They are most often used for linking to things,
in that the link is un-indented but the definition and description of
that link is indented below it into a small paragraph.
And here is the HTML for that list:
Now I will explain what the different tags
in that code stand for or mean or whatnot. You have now completed Page Three of this guide and have hopefully learned all of the text tags, the image tags, and the tags used to create lists. Click on the button below to continue, please, or you might want to go to the top of the page again? Do ya'?
|
Related Links Gif or JPEG? Discuss When and Why to Use Each. Excellent Freeware RGB/Hex Conversion Program: Convert Colors to Code Easily. |
|
