Learning HTML
For Kids!
10. Graphics
What would a Web page look like without graphics? Pretty boring to say the least! But not so long ago, that’s just what the Web was like—just plain, boring text. Remember, in those early days the Web’s sole purpose was to exchange information. The real change came when designers added graphics. Nowadays, we’ve become used to seeing bright and colorful pages.
Some details.
It wasn’t always so colorful and so easy to place images onto a Web page. From the
start, images have always been memory and space hogs. But during the past few years,
designers have worked hard to keep image files small, while also increasing the quality of
the artwork that appears on the Web today.
Two file formats have been developed to help keep files small, while maintain a high level of quality:
.gif files: graphic interchange format (pronounced like Jif peanut butter)
.jpg files: joint photographic experts group (pronounced jay-peg)
There are some advantages particular to both. The gif format is the oldest, created by CompuServe to provide a way to show graphics no matter what computer you are using (it’s called cross-platform). Later, the "gif89" format was created so that the image background becomes transparent. That’s a good thing when working with colored page backgrounds. The gif format is also better for line art.
On the other hand, the jpg format was originally created to store photographs. Files formatted in jpg are larger than those in gif, and they do not have transparent backgrounds.
If you have images that are not in one of these two formats, you will need an image editor to convert them. Two such programs are Adobe® PhotoShop or Paint Shop Pro (a shareware program that you can download at Jasc Software).
The Image tag
To place an image onto a Web page you will need to use the image tag. There are two very
important things to remember about the image tag:
- It’s an empty tag (remember, that means there’s no closing tag, only a beginning).
- It requires attributes to be effective.
The image tag <img> has several attributes:
src--identifies the image and tells the browser where to get the image
alt—gives alternative text for those who are not viewing their pages as images.
height & width—tells the browser the size of the graphic (speeds up the downloading process
Let’s go through each one of the attributes in more detail.
SRC attribute
To help the browser identify and find an image, you use the following command:
<img src="filename.gif">
I’d like to cover a couple of important things here. While the name of the file is important, it is equally important to direct the browsers to where the file is located. The browser will not show your image if it can’t find it.
Let’s see if I can demonstrate this process through the following diagram.
Notice that all the files are in the same folder or what is also called a directory. So the browser will first look into the main folder (Mikes Bike Shop), find the HTML file (shop.html), load the text and then load the graphic files (horn.gif and bike.gif). That’s why you see those funny little boxes when a page is loading. The browser downloads all the easy stuff first (the text) and then the larger and more complex graphic files last.
Alt attribute
Sometimes people turn off their image loading option in their browser, leaving a Web page
with lots of blank boxes. So all the work you have done to place those important images is
gone, leaving in its wake only blank, boring boxes.
The alt attribute lets the user know what’s in the picture by providing descriptive text. It also has an added feature with the latest versions of Internet Explorer and Netscape Navigator. When the cursor arrow passes over artwork or a photo, a little rectangular box pops up that contains the alt copy. It’s a great way to add interest to your page or even give instructions to the user.
Here’s an example. Place your arrow (cursor) over the image below. If you have the latest version of IE or Navigator, you will see a pop-up box that says, "When things go wrong with your code, you need to do some detective work!"
The image tag for this graphic looks like this:
<img src="mystery.jpg" alt="When things go wrong with your code, you
need to do some detective work!">
Height & Width
attribute
When placing your images onto the screen, the browser looks for the height and width of
your images. This is an excellent feature because it allows the browsers to set the space
size aside while laying out the balance of the page. If you do not specify the size, the
browser will stretch it or reduce it to fit.
Height and width are listed in pixels--those little dots that make up an image on a computer screen. If you want to know the size of your image, open it up in Netscape Navigator. The pixel size appears in the title bar. Here's an example using the following image that measures out at 149 pixels by 140 pixels.
The code for this image is
like this:
<img src="masks.jpg" width="149" height="140"
alt="You can determine how large your images are by opening them in
Navigator.">
Align Attribute
When you place a graphic on a page it will always appear to the left (that's the default
or the standard for the browser). However, you can place it to the right just by adding
the align attribute to the image tag. Here's
an example of a right alignment:
And the code looks like this:
<img src="masks.jpg" align="right" width="149"
height="140" alt="This is an example of a right-aligned image.">
Centering an image
But what if you want to center an image. The best way is to use the paragraph tag with the center attribute. Here's an
example:
And here's the code:
<p align="center"><img src="masks.jpg"
align="center" width="149" height="140" alt="This is an
example of a centered image."></p>
Image Hotspots
Instead of using text as a link (hotspot), it's very common to use an image. It's simple
too! Just take include the image tag within the anchor tag.
Here's the code for a link to
the Blast-Off page:
<a href-"graphicsc10.html"><img
src=atom.jpg width="119"
height="120" alt="Take this link to the Blast-Off page"
border="0"></a>
And here's the image hotspot. Place your cursor over it and then click.
Notice that there is an extra attribute: border. And I've given it a value of "0". You must add the border attribute if you do not want a border. If you do not list a border, the browser will go to the default, which looks like this:
You can use an image to serve as an internal link within your own Web site. Another way is to use image maps. To learn more about image maps, go to HTML Goodies.
A note
about copyright
You should never use any graphics, images, text or photos without permission. There are
several sites available on the Web where you can receive free images. But under no
circumstances should you ever copy material unless the site says you can or you
personally have received permission. It's just better to create your own stuff or ask
(and get an okay) before you use someone else's stuff. Don't be a cheater!
Go to Chapter 11: Creating Web pages with tables
|
Privacy
Statement |