More Attributes for Images
Most if not all of these html attributes are deprecated, that is, superseded by new and improved styling. Find out more in the revised edition of this page.
There are many more attributes you will need for images besides the minimum
src, height, width, and alt.
This page shows some of the more useful ones.
Align
The align attribute controls the spacial relationship of the image,
the text it is grouped with, and the web page. You may only use one align
attribute/value pair per image tag.
Images are inline elements, they can fit
inside of paragraphs (and table cells) and flow along with the text like
this small blue square
.
Notice that the bottom of the image aligns with the baseline of the text, and the height
of the image increases the line spacing for that line.
When left to its own devices, i.e. not in a paragraph or table, images line up on the left side of the page like the one above.
This image has the attribute align="left".
It aligns to the left of the page and text wraps on its right.
Succeeding paragraphs and other page elements will continue wrapping around the image unless a special version of the break tag is used.
To clear the side of the image, use <br clear="left" /> or
<br clear="all" />.
As you might expect, align="right"
moves the image to the right;
text and other elements wrap around the left. Similar special break tags are used
to clear the image; <br clear="right" /> or
<br clear="all /">.
This image uses the align="top" 
attribute to give this
result.
align="middle" gives
what you might expect.
Finally, align="bottom"
looks like this.
hspace and vspace
Sometimes your image may seem crowded by the text, losing some if its impact. Use
the hspace and vspace attributes in the image tag
to give the image "breathing room." hspace stand for horizontal
space, vspace for vertical space. The value is expressed in pixels.
Here are some examples.
An image using hspace="20". This give twenty pixels of breathing room on both
sides of the image. For demonstration purposes: Blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
An image using vspace="20". This give twenty pixels of breathing room top
and bottom of the image. For demonstration purposes: Blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
An image using hspace="20" and vspace="20". This give twenty pixels of breathing room
all around the image. For demonstration purposes: Blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
An image using hspace="20" and vspace="20" and
align="left". Combine the attributes as needed. For demonstration purposes: Blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
border
The border attribute allows you to specify the size of the border around your image
or eliminate it if you use an image as a hyperlink.
Here are a few examples: border="10"
,
border="5"
,
and border="1"
.
When you use an image as a link, the browser adds the border around the image
much like the underlining for text links. An example is this top graphic used as a link
to the top of this page, it has no border attribute:
Use border="0" to eliminate the tell tale link border:
Top | Back | Home | Schedule | Exercises | Tutorials | Resources
This page, http://art.wallyzone.com/dm60a/tutorials/image-attributes.shtml, was last modified on Wednesday, October 26, 2011.
©1999-2012 Wally Parham (Contact Here) (About this site) (Print Friendly Version)
|
