Lyn's Resource Center: Advanced HTML: Images

Main Page
Basic HTML
Advanced HTML
Images
Frames
Tables
Forms
Geo Quick Help
META Tags
Page Tips
ASCII Codes
Color (Hex) Codes
Links
Webrings
What's New
Contact Me
Feedback Form
Help Forum

Adding Images to Your Page

Image Attributes

Aligning Images

Images as Backgrounds

Image Links

Adding Images to Your Page

The first step in adding an image to your page -- even before you add any code -- is to upload it to the directory your homepage(s) are on. (See my section on uploading for more information.)

Once this is done, you're ready to add the code. I'm going to use an image for an example. (I'll be using this image throughout this page also.) The image's name is Flwer4.gif, so you'd add this image into your page with the following:

<IMG SRC="Flwer4.gif">

And here's how it would look:

Now, Yahoo! GeoCities allows you to upload files and create pages in subdirectories. Sometimes this is easier, so you can put all your images into a directory called Images. If you had a subdirectory called images, you would use this code instead:

<IMG SRC="Images/Flwer4.gif">

That's it! I know, I know, you're probably thinking it seems just too simple. Ok, I have to admit, although that is the basic code, there are tons of attributes that can be added to this tag. The next sections will go more into depth with this.

Note: Make sure you spell your image name correctly and also use the proper capitalization! Errors of those types are the main reason why an image won't show up properly. For instance: pic.gif Pic.gif pic.GIF and PIC.GIF would all be considered DIFFERENT images.

Back to index

Image Attributes

This section will discuss some of the attributes used in combination with the image tags. The attribute being discussed in each section will be displayed in red in the examples.

WIDTH, HEIGHT: These attributes are used within the image tag. They are used to specify the image's size. For instance, the flower image used in the section above is 83x100 pixels. By adding this in the form of height and width, it helps the overall page load faster. Here's how you'd add them to the tag:

<IMG SRC="Flwer4.gif" WIDTH="83" HEIGHT="100">

ALT: The ALT tag is used to supply alternate text to non image browsers, and also to ones with the images shut off. It also comes in handy if you messed up on your HTML and your image comes out "broken". The viewer of your page is then able to determine what your image was supposed to be. Your ALT tag should describe what your image is. For example, the flower image I've been using on this page is a daisy. So for my ALT tag:

<IMG SRC="Flwer4.gif" WIDTH="83" HEIGHT="100" ALT="Daisy Image">

BORDER: This attribute is used mostly with linked images, but can also be used with regular images. When you use an image as a link, a border is put around it by default. A regular image has a default border of 0. You can change the size of that border by changing the number after the BORDER attribute. For example, by typing this:

<IMG SRC="Flwer4.gif" BORDER=1>

The image would look like this:

Notice there's a thin border around it. In the tag above, you can see that this is set at 1. Setting it to 0 would not display a border. Making the number larger than 1 would make a thicker border.

Back to index

Aligning Images This section discusses aligning images, specifically with something. Text is a perfect thing to align with an image as an example, so that's what we will be using. First of all, I should mention that ALIGN is an attribute. I didn't put it in the last section, because this is too big of a topic to just squeeze in with the other attributes.

ALIGN's elements are LEFT, RIGHT, CENTER, TOP, MIDDLE, and BOTTOM. These attributes would be added the same way the attributes in the last section were. Let's see some examples with our trusty old daisy image:

This image is aligned left with the text. You'd add ALIGN=LEFT to your image tag to do this.

This image is aligned center with the text. You'd add ALIGN=CENTER to your image tag to do this.

This image is aligned right with the text. You'd add ALIGN=RIGHT to your image tag to do this.

This image is aligned top with the text. You'd add ALIGN=TOP to your image tag to do this.

This image is aligned middle with the text. You'd add ALIGN=MIDDLE to your image tag to do this.

This image is aligned bottom with the text. You'd add ALIGN=BOTTOM to your image tag to do this.

Back to index

Images as Backgrounds

You can use ANY image (well, at least any image in internet suported formats) to make a background. For instance, click here to see the daisy image as a background. In order to make the daisy image the page's background, add BACKGROUND="Flwer4.gif" to your body tag. (More on body tags.) Here's a sample of what the body tag would look like:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#008080" VLINK="#0000ff" BACKGROUND="Flwer4.gif">

One thing you should take note of: not all images are suitable as a background. For instance, although I chose to use the daisy as an example, it would hide a lot of text if you choose black as a text color. Basically, test out your backgrounds before you publish them to the internet. (Of course, you should always test a page out before publishing it anyway!)

Back to index

Image Links

This section will show you how to turn an image into a link. An example of this would be the sidebar on this page. If you click one of the white buttons, it takes you to the page described on the button.

Let's use the daisy picture once again. (I bet you're all sick of that daisy by now...) Now, let's say I wanted to use it as a link to Yahoo! GeoCities. I would then combine the tag to put an image on a page with the tag to make a hyperlink. (More on hyperlinks.) The tag would look like this:

<A HREF="http://geocities.yahoo.com"><IMG SRC="Flwer4.gif"></A>

Notice how the tag for the image is surrounded by the hyperlink tag. The output would be this:

If you click on the daisy above, it will take you to Geocities. Note that there is a border around the image. If you remember the section above on image attributes, by default, a linked image has a border. To get rid of this border, simply add the BORDER=0 attribute to the image tag.

Back to index

Page and graphics design and content © Copyright 1998-2000 Lyn Knarr. Sections of these help pages are also available at Hollywood's Community Center.

Webmaster is a Yahoo! GeoCities Community Leader in the neighborhood of Hollywood. Please email me at knarrly@yahoo.com if you need help with your homepage, or Yahoo! GeoCities in general. Community Leaders are always glad to help! Please visit Hollywood's pages made by your CLs: Hollywood's Community Center and Hollywood's Committees and Special Events Center.

Most graphics and headers were made using Paint Shop Pro. Please do not take any images off these pages without my permission. If you are looking for a logo or header for your own website, use the request form at Graphics Source.

The webmaster is not responsible for any banners that may appear on the GeoGuides or LinkExchange banners on these pages. I am not endorsing any ads that come up in the banner rotations, and my apologies in advance if anything comes up in them that is unsuitable for younger audiences. Thank you.