| Lesson 4: Adding Images |
| You may wish to include images, such as a portfolio, with the resumes you construct. This is quite simple to do, as long as the image is in the .gif or .jpg (or .jpeg) file formats. Web browsers generally will not support any other format. |
|
The command to place an image is constant. Here's the format for placing an image: <IMG SRC="image.gif"> Example:
The butterfly image should appear in your HTML page. Here's what's happening:
|
Image Alignment (<IMG SRC=". . ."ALIGN=". . .">)
|
Placing the image is a simple process. The default is justified to the left, so if you write an image tag on a page, the image will pop up hard left. If you want to place an image in the center of the page, you'd use the <CENTER> and </CENTER> commands described in the text formatting section. But how do we get the image to the right of the page? Here's the format:
|
|
You will sometimes want to include text with an image. Here you will ALIGN text along the top, the middle, or the bottom. Again, you'll use the ALIGN=". . ." attribute with one of these three: "top," "middle," or "bottom." Here's how:
Click here to see an example of aligning text with images. |
Sizing Images (<IMG HEIGHT=". . ." WIDTH=". . ." SRC="image.gif">)
|
A simple rule of thumb to remember when including images is this: the larger and more numerous the images, the longer an employer has to wait to view the page. As such, you want to keep your image files as small as possible. One way to do this is to create "thumbnails,"small images that link to individual larger ones. By doing so, the page will load much more quickly, and the employer is given the option of viewing the images. Pixels compose all images. To alter the size of an image, simply alter the number of pixels. If you are using Netscape Navigator, you can determine the number of pixels in an image by opening it by itself in the browser window. Do that by choosing OPEN FILE under the FILE menu. When the picture pops up, look at the title bar along the very top. The height and width should be there. To size an image:
Where ". . ." is included, denote how many pixels high by how many pixels wide you want. When altering an image, however, remember that you must maintain the same general proportions, or else your image will appear distorted. Example:
|
Creating Image Links (<A HREF=". . ."><IMG SRC=". . ."></A>)
|
Sometimes you may wish to use an image as a link to another Web page. This is especially useful when you have larger files that may take some time to load. In these cases, you may include thumbnails that then link to the larger image, saving the viewer time. Creating an image link follows the same pattern as a text link. The only difference is that you replace the text in the tag with the image location. Let's make the butterfly image link to Webster University: Click the image to test your image link.
|
Creating Background Images (<BODY BACKGROUND="image.gif">)
|
Creating a background image for your Web page follows a similar pattern to creating background colors. The attribute is again included in the body tag. Example:
|
 |
 |
| Home | Lesson
1 | Lesson 2 | Lesson
3 | Lesson 4 | Lesson
5 | FAQS |