Using Spacer Images
Print This Post
No CommentRelated Reading |
This section of your free online web design course covers “spacer” images, which are basically 1×1 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 1×1 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 1×1 dimension image. Save it to your hard drive by right clicking and selecting “Save Picture As…” from the menu:
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> Online Web Design Course </body> |
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> Online Web Design Course </body> |
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.
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!
Loading ...
Popular Tags