Expression® Web Design
Alt and Title Attributes
Saturday, January 10, 2009
For
some of the webmasters who just relied on FrontPage to develop a website, these
attributes were probably never used or heard of. (And by the way, they are
not alt tags or title tags. They are attributes.) However, some users would
see a little pop-up from time to time when they were using Microsoft Internet Explorer
to browse the Internet. Other browsers though did not show this information.
If you notice the example here, Microsoft Internet Explorer 7 is showing the alt
attribute for the image "Expression Web Folder List Task Pane". On most other
browsers, you will not see this pop-up.
The <img> Element
When you inserted an image into your web page with FrontPage, there were not too many steps. FrontPage looked at the image and added the width, height, and border attributes. It would sometimes add align and hspace attributes if you dove more into the image properties. The code would look something like:<img border="0" src="images/masthead.gif" width="80" height="80">
Unfortunately, it missed an attribute - the alt attribute, which is required if you were using HTML 4.01 and XHTML 1.0. It is required to help show some information if the image cannot be rendered. It is required to help users that do not want to download images to see what that image might be (possibly someone who has a slow connection to the Internet or maybe a handheld device). It also helps some users who rely on "screen readers" to access the Internet. Some search engines will read and use the text when spidering your website.
Now most of those attributes that FrontPage adds are deprecated and the standard is to use styles (CSS) to help define the border, width, and height. The height and width of the image is not required, but it is a good idea to have that information in there to help the browser know how much space is going to be needed as the web page downloads.
Now
when you add an image to your web page using Microsoft Expression Web, you get a
dialog box titled Accessibility Properties. In the Alternate text field, you
would enter the information that best describes that image. Once you enter
the correct information, hit OK and now your code should have the alt attribute
in the <img> element. If you do not get this option, go to Tools - Page Editor
Options. In the General tab, make sure that "Prompt for accessibility properties
when inserting images" is checked. If you do not enter anything into the Alternate
text field, Expression Web will still add the alt attribute, but it will be empty
(which is OK):alt=""
The Long description field is for the longdesc attribute. It is rarely used. You will notice it has a browse button beside it. The value is a URL to a page that describes the image. It is used when you have a need for a much more detailed description than the alt attribute can handle. However, keep in mind that the alt attribute should still be in the <img> element.
So is there a way to get other browsers to show a little pop-up message on an image? Yes - by using the title attribute. Unfortunately Expression Web does not support this feature yet, so you will need to add the attribute manually
<img alt="Our Logo" src="images/masthead.gif" title="Our Logo">
Most browsers will show the title attribute when the user places the cursor over the image.
The Border Attribute
Since the border attribute is deprecated, you will need to use styles, especially if your images have a hyperlink attached to them - you might notice a blue border around the image. This is easy to get rid of, and hopefully you have a stylesheet. If so, just add:img {
border:0
}
to your style sheet. Now all the images will show no border (unless you specify it somewhere else, maybe an inline style).
The <a> Element
Most will call this a (hyper)link. The code is fairly simple<a href="http://www.loudexpressions.com">Expression Web Blog</a>
Both
FrontPage and Expression Web made it very easy for the webmaster to add a link to
some text. You can highlight the text and press CNTL-K or go to Insert - Hyperlink.
While you are in this "Insert Hyperlink" dialog box, you should see "Text to display".
In this field should be the text you highlighted to become a hyperlink. To
the right, you see a button named "ScreenTip…" If you click on this button, another
dialog box opens named Set Hyperlink ScreenTip. If you enter some information
into this field, Expression Web will add a title attribute to the hyperlink.
That text will be see when the user places his cursor over the hyperlink. <a href="http://www.loudexpressions.com" title="Expression Web Blog">Expression Web Blog</a>
When a user puts the cursor over the linked text (Expression Web Blog), a pop-up (or screentip) will be seen as well named Expression Web Blog
Comments
