Online-web-design-course.com 

IMAGES!

Online-web-design-course.com
HOME             RESOURCES             LESSONS             DIRECTORY             ARTICLES             FORUMS

Sponsor Links

Free Image Hosting
Your source for free image hosting - upload your images!

Poker Strategies and Tips
Poker, online poker, poker terms, poker accessories, poker tips and tricks.

Photoshop Tutorials
Over 3,000 tutorials for Photoshop, Flash and 3DS Max!

6,000 Free Fonts
Download over 6,000 Free Fonts for Mac and PC @ FontVillage.com

Buy Website Visitors
1,000 Targeted U.S. Visitors for $3.50 - 30 day guaranteed.

Reading Tarot Cards
Videochat with certified tarot readers & psychics - unlimited tarot cards readings!

Affiliate Software
Start an affiliate program and design to maximize affiliates' productivity

PPC Search Engine
Low cost advertising for your website!

Technical Service Provider
Your number one source for computer repairs and network solutions
 
LESSON 1-07-06: Using Spacer Images
Google
 

Web Design Lessons > Lesson 1-07-06: Using Spacer Images

Previous Lesson | Lesson Index | Next Lesson

This section of your free online web design course covers "spacer" images, which are basically 1x1 dimension, transparent GIF images used to create useful blank spaces in a web page.

For example if you want two objects to be a certain amount apart from each other, you can part them by placing a spacer image with a width of the desired distance inbetween these two objects.

Below is an enlarged 1x1 transparent GIF image. I've set the "width" and "height" attributes of this image as 50 pixels for you to be able to see it and save it, but it is still originally a 1x1 dimension image. Save it to your hard drive by right clicking and selecting "Save Picture As..." from the menu:

Enlarged Spacer Image

Sidenote: Make sure you save it to the same folder as you keep your HTML files, or change the filepath accordingly in the below examples.

Let's say we want to separate two pieces of text horizontally or vertically. In order to do that, we can use either tables or spacer images. Have a look at the below HTML code:

<html>
<head>

</head>
<body>

Online Web Design Course
<img src="spacer.gif" width="100" height="1">
is your totally free HTML tutorial!

</body>
</html>

In the above HTML code, "Online Web Design Course" is separated from "is your totally free HTML help!" by 100 pixels horizontally, as we have set the width of our spacer image as "100". Below is the output of the above HTML code:

Online Web Design Course is your totally free HTML tutorial!

Sidenote: Remember to set the height of your spacer image as well as the width when setting it up. When separating items horizontally, the height of your spacer image should be "1". Similarly, if you are using the image to separate items vertically, set the width of the image to "1".

Let's do the same thing, but this time vertically:

<html>
<head>

</head>
<body>

Online Web Design Course
<br>
<img src="spacer.gif" width="1" height="100">
<br>
is your totally free HTML tutorial!

</body>
</html>

Notice that this time we have set the width of our spacer image to "1" and the height to "100" so that our texts will be 100 pixels apart *vertically*. We have also put two <br> tags to separate our items with a line break. If we did not put the <br> tags, our texts and image would appear in a horizontal row instead of a vertical row, so we need those <br> tags. Below is our output:

Online Web Design Course

is your totally free HTML tutorial!

Note that you can position many types of items (i.e. images, flash animations, form elements, etc.) by using spacer images.

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

This was the last section of Lesson 1-07. Next lesson is about putting links in your HTML documents. Let's head on to Lesson 1-08!

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

Lesson 1-05 HTML Tables
Lesson 1-06 Background Alteration
Lesson 1-07 Images
Lesson 1-07-01 Inserting images into your web pages
Lesson 1-07-02 Adding alternative text to your images
Lesson 1-07-03 Sizing images & adding image borders
Lesson 1-07-04 GIF vs JPEG
Lesson 1-07-05 The PNG format
Lesson 1-07-06 Using spacer images
Lesson 1-08 Hyperlinking
Lesson 1-09 Aligning Your Content

Back To TopWeb Design Course Top

Home  |  Resources  |  Articles  |  Lessons  |  Directory  |  Forums

Contact  |  Submit Article  |  Submit Site

Forums Archive  |  Site Map

Copyright© 2004 Onur Özcan. All Rights Reserved.

Long Distance Phone Service
Online-web-design-course.com

You must set the "ad_network_ads.txt" file to be writable.


 
Partner Links