Web Design - Introduction to Graphics

Sections:   Introduction  |  Section 1  |  Section 2  |  Section 3  |  Section 4  |  Section 5

Section Four:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G  |  Part H

Additional Attributes Assistive <img> Attributes Throughout your learning of HTML you have regularly been reminded of the visitors to your web site who may use some form of assistive technology to view the site. The <img> tag and its required src="" attribute do not provide much useful information to visitors using assistive technology. For instance, if a visitor to the DreamVacation.html web page was using assistive technology the only information that they would gather from the <img> tag and the src="" attribute would be that the image was in .jpg format and that it is named amazon. Without any of the other supporting information listed on the web page, the user may not know whether the photo refers to the Amazon River or to the Internet shopping site, Amazon.com. To provide users with more information about an image listed on a web page you must add two purposeful attributes to the <img> tag: the alt="" attribute and the title="" attribute. The alt="" attribute is meant to provide site visitors a "text equivalent" of the image ("Use the alt," n.d., para 1). This is helpful for visitors who are unable to view your image due to visual impairment or the web browser being used. The title="" attribute is similar to the alt="" attribute in that it is meant to provide additional information about an image. The display of the title="" attribute varies depending on the browser being used. For instance, if a visitor to your site is using a "visual" web browser, the text presented in the title="" attribute would be displayed as a tool tip; whereas if the visitor to your site is using an "audio" browser/agent, the text in the title="" attribute may be spoken ("The global structure," n.d., 7.4.3). Let's see both attributes in action. The alt="" Attribute Note: The example image below was created using a web browser with images disabled. The title="" Attribute Note: The example image below was created using a web browser with images enabled and the title="" attribut added. Considering Image Size Let’s return to the Favorite Vacation web page, DreamVacation.html, displayed above. As you can see, the photo referenced is very large. In fact, it takes up almost the entire browser window. While the picture may be beautiful, it is not a good idea for it to displayed quite so big – for a couple of reasons: The larger the image, the slower the page download time. Text listed after the large image may be “lost” to readers. As with any file on the Internet – the bigger the file, the longer it takes the file to download and open. When a web page opens the text is automatically displayed because it is actually listed in the HTML document. The image does not immediately open as it is being “brought into the page” from another location on the web. If the image size is big the web page will take a while to display the image and in the mean time the layout of any text or other HTML elements on the web page may be displayed incorrectly until the image is fully loaded. The second reason for not displaying large images refers to “lost” text. This is not to say that the image erases text from the web page, but you will find that most visitors to your site do not want to scroll down the page if they don’t have to. If you have a large image on your web page that takes up most of the viewable browser window, a visitor to your web page may not realize that there is text listed below the image. There are two methods to ensure your web page images are correctly sized: Use an image-editing software application to modify the canvas size of your images. Use the width="" and height="" attributes in the <img> tag to modify the images dimensions. To ensure images are correctly sized and displayed on your web page, you can edit them in an image-editing software application. You can reduce their canvas size (both width and height proportionately) and then save them in the same format (name and file type), in the same location they were previously housed. In addition, the width="" and height="" attributes can be added to an <img> tag to modify the dimensions of your image or images. In the Favorite Vacation web page, we can add the width="" and height="" attributes to the <img> tag and specify the value for each in pixels. The problem with this method of resizing your images is that you may disproportionately modify the image’s dimensions. Reference: World Wide Web Consortium / W3C. (n.d.). The global structure of an HTML document. Retrieved from:     http://www.w3.org/TR/html401/struct/global.html#h-7.4.3 World Wide Web Consortium / W3C. (n.d.). Use the alt attribute to describe the function of each visual. Retrieved from:     https://www.w3.org/QA/Tips/altAttribute Next

© 2008 KCDL. All rights reserved.