Posts
Visiting Web sites without encountering pages that contain pictures and drawings is virtually impossible.
Graphics images help to explain complicated procedures or actions that would be difficult to describe
using text alone. In addition, most visitors to your Web site feel intimidated when they see a Web page
with nothing but text. Inserting an occasional graphic into a long body of the text gives visitors a break
from reading, and if used correctly, helps explain the text. Suppose, for example, you want to create a
Web page that explains the steps necessary to change the ink cartridge on an Epson 1520 inkjet printer.
A few well-designed illustrations would explain the process better than several paragraphs of text.
In addition, site visitors have the option to change the default typeface used to display text on a
Web page by working with the browser’s preferences. That means that the Web page text will look
different to a visitor using the Arial typeface as the browser default than the text looks in your Web
browser that defaults to the Helvetica typeface. Although this is frustrating, you learned how to
prevent this change in typeface by specifying the font the browser is to use rather than leaving the
typeface selection as the browser default. The real problem with typeface selection comes into play
when you use a specialized or custom typeface, such as those often used to write the company name
in a logo. Remember, if the specified typeface is not available on the visitor’s computer, the Web
browser will display the text using the browser’s default font.
Say, for example, your site has a logo whose text is written in the Skia typeface. If you type the logo
on the Web page as text and the visitor’s system does not have the Skia typeface installed, the visitor’s
Web browser will substitute the browser’s default typeface, which will change the entire look of the logo.
Fortunately, you can preserve the exact appearance of a logo (or other text) by converting the text into a
graphics image (using an image-editing program like Photoshop). If you insert a picture of the text on the
Web page, the text will look the same in all Web browsers—even those on systems without the typeface
you use to create the text. When you convert text to a graphics image, the visitor’s settings that control
font usage have no effect on the text in the picture,
The <img> tag lets you place a graphics image (whether of converted text or a picture or
drawing), on a Web page. A typical <img> tag contains a single src attribute, which tells
the Web browser the pathname of the graphics file. Therefore, most of your image tags will be of the
form <img src=“ path/filename”>. Note the value of the src attribute contains both the path and filename
of the graphics file. For example, the following code instructs the Web browser to retrieve and display
the picture in the file named photo.jpg stored in the images folder on the Web server.
<img src="images/photo.jpg" width="300 height="155">
Proper HTML coding requires that you place all <img> tags between the start and end body tags
(<body></body>) that enclose the Web page content the browser displays onscreen. The following
simple HTML code, when processed by a Web browser will display the graphics image house.jpg:
<html>
<head><title>Image of a House</title>
</head>
<body>
<center><img src="house.jpg" width="400" height="175"></center>
</body>
</html>
3 6 H T M L & W e b D e s i g n T i p s & T e c h n i q u e s
Figure 1-14 Logos with text converted into a graphic image display correctly in the Web browser
In addition to placing a simple image tag within an HTML document, you have several attributes
that control the image within the browser window:
• alt The alt attribute supplies alternate text for browsers that do not display graphics or
for browsers where the user has turned off the display of graphics. Alternate text is also
used by browsers as a tool tip (the text displays in a box near the mouse pointer, when the
mouse hovers over the image) and by reader programs for the visually impaired.
<img src="images/photo.jpg" alt="Photo of Florida Sunset">
• height and width The width and height attributes define the size of the image displayed
within the browser window. Always specify the width and height attributes in your image tags
so the browser can display the remainder of your Web page text while waiting for images to
download. When you specify the width and height attributes in an <img> tag, the browser reserves
space for the images, even if they load slowly, and the document text will flow around where
the images are supposed to go.
<img src="images/photo.jpg" width="200" height="55">
• border The border attribute gives the pixel-width of the border the Web browser is to draw
around an image. If you use an image as the anchor for a hyperlink, the browser will draw a
border around the picture. As such, drawing a border around pictures may make the visitor
think the picture is a hyperlink. Therefore, it is recommended that you set the border attribute
to zero (0).
<img src="images/photo.jpg" width="200" height="55" border="0">
0 comments:
Post a Comment