Image Attributes Used In Professional Web Design

Image Attributes Used In Professional Web Design

Image tags with its source attribute points to the uniform resource locator that is URL of the graphic file to be displayed to add an inline image to the web document. The tag is added to the HTML document at the location in which we want to display the image. Then file name is replaced with the URL of the image we want to display.

When an inline image is inserted in a document along with text by default the text is aligned with the bottom of the image. The default alignment can be changed using the image tags align attribute. To align the text at the top of the image we can use few attributes. Browsers display images inline and text does not wrap around images but an image can be displayed on the right or left side of the document such that the text surrounds the image. Such an image is termed as a floating image in professional web design.

A floating image can be easily created by using the image tags align attribute that is left or right. Hyper Text Markup Language also supports image scaling. Scaling down of an image means that the image would be displayed in a size described by the image tags height and width attributes, irrespective of the actual dimensions of the image. The download time of the image
does not reduce if we specify dimensions less than the actual image dimensions. The browser still downloads the actual image and then scales it before displaying it on our web page.

Scaling up on an image can also be done. It is similar to scaling down of the image that we attain by using the height and width attribute. Scaling up an image causes deformation of image that is termed as pixilation. Hence scaling up of an image should be avoided as far as possible in professional web design

Alternative text can also be provided for users who use text based browsers. Alternative text tells the user about the presence of a graphic image and provides a brief description of the same. This can be achieved by using image tags.

Web browsers display images with a border around them. The border attribute of image tag can be set by providing a value for the border thickness in pixels. White space around an image can be provided by using space attributes of the image tag. Space tag is used to add vertical and horizontal space around the image.

These attributes provide the space and pixels. Hyper Text Markup Language uses image maps which are a kind of navigational tabs making work easy in professional web design. An image maps an image to one or several links using regions called hot zones.