Featured Templates
Home
HTML and CSS
Tutorials
Hyperlinks and Images
Added: Oct 03, 2005 Rating: Less than 3 votes yet
Level: Beginner Software:
Image Margins
- Image margins are controlled with the HSPACE and VSPACE attributes.
- Simply put, the HSPACE and VSPACE attributes define the margin around your image in pixels.
- Since this is best seen by example, let's look at one. Consider the following code:
<HTML>
<HEAD>
<TITLE>Margins</TITLE>
</HEAD>
<BODY>
Here is some text that should wrap around this image
very snuggly. <IMG SRC = "afraid_icon.gif"
ALIGN = "LEFT"> That is because we are using the default
margins and the default margins are not very large.
<BR CLEAR = "ALL">
This image on the other hand should have a decent margin
<IMG SRC = "afraid_icon.gif" VSPACE = "15" HSPACE = "15"
ALIGN = "LEFT">
around it so that the image will seem displaced a bit.
This usually looks nicer.
</BODY>
</HTML> |
- When interpreted by the browser, the previous code would be displayed as follows:
Here is some text that should wrap around
this image very snuggly. 
That is because we are using the
default margins and the default margins are not very
large.
This image on the other hand should have a decent margin
around it so that the image will seem
displaced a bit. This usually looks nicer.
Image Usage on Your Page
- So, till now, we have not really explained how you get images to your web site. In fact, in several examples, we referenced images from another web site altogether.
- Is this stealing?
- By custom, the answer is no...but..
- The answer is no because the image still remains on the site where it is referenced. You do not even have a copy of the image on your server at all. In fact, the only one who actually downloads the image is the person looking at your page because the browser will need to grab the image in order to display it.
- However, there are a few things that you should consider good netiquette when taking images.
- First, every time someone reads your page, the image will be called from the web server where it is referenced. Thus, you are causing someone else's web server to work harder even though they are not servicing their clients, but yours. Thus, it is far better to download the image yourself and store it on your server, referencing it locally.
- But then you have the image, isn't that stealing?
- No, not really. Part of the dynamic of the web is its ability to build upon itself and distribute information and ideas freely.
- However, a lot of people put a lot of time into creating images. If you do use their image, take a second to email them and say thank you. Most people will be proud, since imitation is the greatest form of flattery and will be happy to let you use their image. Some people will be pissed. Just use your common sense, tact and understanding.
- So, once you have gotten permission, how do you get an image from someone else's web sever so that you can place it on your own?
- The best way is to use your web browser. Go to the page where the image you want is located and click your right mouse button. One of the menu choices will be "Save Image". Choose this option and then transfer it from your local machine to your web server. Easy!
Creating Images
- Eventually, you will want to start generating your own custom graphics for your web site.
- Unlike with using other people's images, with custom graphics you have the ability to define a uniform color, font, size, and style. Thinking in terms of a common look and feel is the first step in making a clean looking web page.
- Besides creating a standard look and feel, you should be aware of a few
other design concepts before you start creating your own graphics.
If you are serious about web design, you should get a copy of Adobe Photoshop. If you are really serious about web design, you should get several filters like Kai's Power Tools.
- First, designing for the web is not like designing for print. Don't attempt to align pages to the pixel or colors to the RGB value. Alignment, margins, colors, and most everything else about design is highly dependent upon the browser software, operating system, and hardware that the person is using to look at your web page.
- It is impossible to design a web page that will look exactly the same way in all circumstances unless you code to the least common denominator. And this is a pretty ugly web page.
- Instead, you must allow for a fluid design and take care to test using different browsers, different operating systems, and different monitor settings (including black and white versus color, different resolution, and different bit depth).
- Finally, you must take care to choose the right file formats, the right color map, and the right image size if you are to have top of the line graphics. Let's take a look at those topics...
Image Formats
- The two most common graphic file formats on the web are .GIF (Graphic Interchange Format) and .JPEG (Joint Photographic Experts Group).
- Why are they used?
- These file formats are used on the web because they have the best compression. Compression is the technique used to take a large file and turn it into a smaller file by applying a fancy mathematical algorithm to it. Since many users are accessing web pages on 28.8 modems, the smaller the file, the more quickly it can be transferred over the net.
- Image size is no joke. If your images take to long to load, a user will never even bother to wait to read about what you have to say.
- A good rule of thumb is that you should use .GIF files for images and .JPEG files for photographs.
- The .GIF format is also interesting because of the amount of "special effects" it provides. Besides a standard .GIF file, you can easily download freeware programs to create interlaced .GIF files, transparent .GIF files, and animated .GIF files. Let's look at each...
- An interlaced .GIF file is a file that loads in pieces. It starts out fuzzy
and continually focuses until it is in perfect focus. Interlacing does not
actually speed up the loading of the image, but it does make a user feel
as if it does because they can watch it materialize. Below is an example
of an interlaced .GIF (you may have to reload the page to see it load though).
- Transparent .GIF's allow you to specify a single color that will become
transparent, thus allowing the background to show through. This is useful
when you want to create the illusion of irregularly shaped artwork such as
when you add text art to your page. Instead of getting an ugly square box
around your text, a transparent .GIF will make the type appear to blend right
into the page. The following example shows the same image, one with no transparency
and one with a transparent background.
- Animated .GIF files allow you to merge several images into one in order to create a cell animation. Note that for each cell, the image is that much larger, so you must take care to make your animation in as few cells as possible.
- Here is an example of an animated .GIF
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com
10 Random HTML and CSS Tutorials :
10 Random Markuptutorials.com Materials: