===========================================================================
Today on The World Vol. 4 #146 Friday, June 5, 1998
===========================================================================
Chapter 4 of the ongoing HTML tutorial is all about images (background
and "inline".) The exercises in here require a couple of little pictures
to work with, so you'll need to download them from:
http://world.std.com/help/web/tutorial/images
Remember that to download an image, in most Windows browsers, click on
it with the right mouse button and look for a command like "save image
to disk" or "download link to disk". In most Mac browsers you can hold
down the mouse button (click and HOLD) to get the same options.
(Eventually all the parts of this tutorial will be posted on the Web,
once it's complete.)
(kibo)
---------------------------------------------------------------------------
HTML TUTORIAL -- CHAPTER 4 -- IMAGES
4.1 BACKGROUND IMAGES
By now you're probably itching to put in a background image and some
pictures. A complete discussion of the art of making the pictures
themselves is beyond the scope of this lesson, but here's my advice in a
nutshell: use JPEGs (.JPG files) for photographs and GIFs (.GIF) for
icons, buttons, and cartoons. JPEGs can represent thousands more shades
of color than GIFs and compress better, but GIFs are better for cartoony
little things with sharp edges. (Additionally, GIFs can be animated or
have transparent areas.) There should be some example images
(photo.jpg, photo_t.gif, button.gif, staranim.gif, texture.gif) with
this file, or you can substitute your own for these exercises. (If you
do that, you'll need to measure their size in pixels first.)
We can start with any of the example Web pages you built from any of
the previous chapters, or if you didn't save them, you can start
with the generic skeleton again:
My Page.
Welcome to my page!
Whatever you're starting with, please be sure that the example images
you'll be working with are stored in the same folder (directory) as
your HTML file.
The first thing we want to do is to load in a background image to add
some texture to the page. I've decided that the page will have a light
background with dark type. Change the line to read:
...and check the page in your browser. The text should be dark red
(black if your monitor's very dark) on white. Now that we've got the
colors the way I want them, I'm going to add a background image. Why
did I specify a background color if I'm going to cover it up with a
background image? Well, some people might not be able to see (or might
turn off) background images. (There are other reasons, too. It's a
good idea to specify a background color which matches, and a text color
which contrasts with, any background image you use.) Add in my pale
tie-dye background image by changing again:
View the page and see if the garish background image shows up. (Note
how much harder text is to read with such a flashy background, even a
pastel one like this.)
Please keep in mind that on some computers, filenames are sensitive to
uppercase/lowercase variations, so type the name exactly as your
computer lists the file. Remember my brief comments about "relative URLs"
a few installments ago? "texture.gif" is one of them, which means it
refers to a file in the same directory as the .html document.
So if the pastel blotches aren't showing on your example page, check that
"texture.gif" is in all lowercase or all uppercase or whatever and that
the .gif file is in the same directory as the .html file.
That's all there is to putting in a background image. Just say
BACKGROUND="..." in , with a filename or URL. To recap what we've
learned about over the last few chapters:
BODY OPTIONS
specifies options for the colors and background of the page
4.2 Inline images
Putting an image in the foreground, in with the text, isn't much harder.
An image that's sitting on your page is called an "inline" image. Add
this at the start of the body, somewhere after the line but
before the text (to make it the first thing on the page):
Save and view the page now, and you should see a big picture of
Anson "Potsie" Williams. In some browsers, once you add an image to the
page, text below the image can't be seen (you can't even scroll down)
until the image completely loads, and this image is big enough that it
might not load for a few seconds, preventing people from seeing the rest
of our page immediately. (It'll load quickly for you, because it
doesn't have to be sent through a modem to get from your computer to
your computer, but once this image is posted on the real Web, it might
take a few seconds to transmit to other people's modems.) The solution
to the problem of browsers not displaying text that follows images that
are loading is to add the optional size attributes:
Those numbers are the size in pixels of the image, and you can find them
out by opening the image with any picture-editing or viewing program.
Specifying the size of the picture in your HTML means that the browser
can leave room for the image before the image is received, meaning it
can draw the text now and then work on fetching the image. Note that if
you enter a different size, the browser may try to stretch or shrink the
image to that size, but it will still have to do the same amount of work
to load it even if you try to shrink it. In other words, although you
can make the picture look smaller by reducing those numbers, it is
still a large picture, just displayed smaller. In general, it's a good
idea to resize the images with a program like Photoshop if you need them
at a smaller or larger size. (Web browsers can be somewhat fickle about
stretching and squashing photos.)
Let's add some more options. We're going to switch to "photo_t.gif",
which is a "thumbnail" (small) version of the big image. Later we'll
make it so people can click on the thumbnail to see the big image. But
for now, I want to use a lot of thumbnails to indicate some of the
options. Take out the ![]()
line for the big picture and paste
this stuff in instead:
Potsie's Page!
Hello, my name is Potsie. I look like this:
only bigger.
Now my photo isn't sticking up as much.
Take a look at how those three photos come out. The BORDER= attribute
specifies whether the image should be outlined or not (the width is in
pixels, "0" for no border. If BORDER= is omitted, most browsers omit
the border.) The color of the border depends on circumstances: some
browsers draw a box (in the text color) around the outside, and others
draw a fancy transparent frame. (If the image were a link, by the way,
the border would be in the link color.)
The topmost image was centered the same way text is centered: by putting
it inside a ...
paragraph. The other two images
are also in paragraphs, this time with text mixed in. Those two images
align with the text differently--one sticks up, with its bottom edge
aligned with the text (this is the default) and the other, with
ALIGN="MIDDLE", is centered on the line of text (vertically). Just as
ALIGN="CENTER" centers a from left to right, ALIGN="MIDDLE" centers
an ![]()
from top to bottom (relative to the line of text).
Let's do an experiment. Add the following near the end of your document:
The quick brown fox jumps over the lazy dog.
Slippery sleds slide smoothly down the sluiceway. Nancy, hand
the man the dandy candy. His name is Stanley and he comes from
Manchester, New Hampshire. Mississippi tugboat. Bite the
wax tadpole. Pack my box with five dozen liquor jugs.
My baloney has a first name, it's O-S-C-A-R. My baloney has
a second name, it's M-A-Y-E-R.
Notice how the photo, being embedded in a line of text, ruins the
even line spacing of the text? Try changing "MIDDLE" to "TOP" and
see what happens, and then to "BOTTOM". Does this make it clearer
what the alignment options do? However, you'd probably prefer
just to have lines of text "flow" around the image, like in ordinary
magazines, rather than having a big gap around the image.
Try using ALIGN="LEFT" and see what it does (especially when you
resize your browser's window), then try "RIGHT". (Note: "LEFT" and
"RIGHT" are relatively recent additions to HTML, so older browsers
may not do anything for "LEFT" and "RIGHT".)
If you want a photo to be on a line by itself, put it inside ...
or put
tags around it.
Tip: If you have an image with ALIGN="LEFT" or ALIGN="RIGHT" to
flow text around it like the above example, and you want another
paragraph below the photo (not to the left or right), use the
tag
to stop flowing text around the photo and
ensure that the next stuff comes out below it.
What's that ALT= options I keep using here? It's just a piece of text
that users will see in browsers that aren't displaying the images (e.g.
Lynx, browsers that have "Auto-Load Images" disabled, browsers that read
aloud, etc.) Most browsers will show the alt text or part of it while
the page is loading, defaulting to something like "(Image)" if you don't
specify an ALT. If you want to check what the all-text version of your
page looks like, try using telnet to login to The World's UNIX shell
and use lynx to view your page. (You'll have to upload the page to
The World to do that.)
Tip: I like to put my ALT text in brackets such as ALT="[My photo]".
That way if lynx runs it together with the text of the page at least
it will stand out. If your image is "content-free", such as a bullet
or something else that you just want to disappear from the text-only
version of your page, use ALT="".
To recap ![]()
:
IMAGES
An "inline" image. Put inside ...
to center it.
Include width and height attributes to make the page load faster.
Alignments of TOP, MIDDLE, and BOTTOM move it up and down relative
to the line of text it's in; LEFT and RIGHT put it at the left
or right of the browser window and text flows around it.
Width, height, and border thickness are in pixels; BORDER="0" for none.
Use this after flowing text around images with ALIGN="LEFT" or
ALIGN="RIGHT" to stop wrapping.
That's all there is to ![]()
: it's the only command to display an
image. The hardest part is just looking up the width and height of each
image, but if you check your tools you'll probably find that you already
have several programs that can tell you. To leave you something to
practice with, I haven't yet used the files button.gif or staranim.gif;
see if you can figure out what size they are and add them to the page.
(button.gif has a transparent background, and staranim.gif is animated,
by the way.)
(kibo)
==========================================================================
[] Send suggestions for tips & URLs to today@world.std.com.
We're also collecting links for our Web pages at eyeguy@world.std.com.
[] To contact CUSTOMER SUPPORT, send mail to support@world.std.com or
call 617-739-0202.
[] To subscribe to the "Today" mailing list, send a note saying 'subscribe
announcements' to majordomo@world.std.com.
Subscriptions to this mailing list are open to World customers only.
[] Darn it, I'm gonna buy that digital camera this weekend or explode.
[] Today on The World is (C) Copyright 1998 by Software Tool & Die.
Its contents may freely be redistributed as long as credit is given.