The <img> tag is used to display images and animated gifs on a webpage. You can use the <img> tag to display images, icons, logos, and buttons, bullets, arrows and other graphic or navigation elements.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

HTML Image Basics

The <img> tag is used to display images and animated gifs on a webpage. You can use the <img> tag to display images, icons, logos, and buttons, bullets, arrows and other graphic or navigation elements.

<img align="left" alt="alt text" title="title text" border="0" width="156" height="225" src="worker.jpg" />

alt text The most important attribute of the <img> tag is the src attribute. The image will be displayed on the page if you include only the src attribute in the <img> tag. The src attribute tells the browser where to find the image file. It sets the address of the image, which can be either absolute or relative. An absolute path contains the domain name, directory and subdirectory names, and the image's file name. A relative path contains only the path from the webpage to the image file. For example, if the image file is in the same folder as the webpage, the relative path is just the file name.

The alt attribute is also an important attribute of the <img> tag. The alt attribute defines text to be displayed if the image cannot be loaded. The title attribute defines text to displayed in a tool tip popup when the user moves their mouse over the image. The alt and title attributes are very important for search engines and to provide information to speech synthesizers for the hearing impaired.

alt text The border attribute is used to control the border around the image. Set the border attribute to the desired thickness of the border in pixels. One of the most common uses of the border attribute is to set border="0" to remove the border that appears when an image is used in a link, as shown to the right. Note; in this case you might keep the border in order to indicate that the image is a link, but if the image were a button, you could remove the border.

The height and width attributes specify the dimensions of the image. If a height or width value is not provided, the image will be displayed full size in that dimension. If you don't want the image displayed full size, you can specify larger or smaller dimensions, however to maintain the images aspect ratio, you need to adjust each dimention by the same percentage. If you want the image displayed full size, you can leave the height and width attributes out, however this will cause the browser to take longer to display the image.

The align attribute is used to control the alignment of the image. Note the first image in this article has align="left", while the second image has align="right". Note how the text wraps around the image. If you don't like the layout of the text wrapping, with align="right" you can use the <br clear="right"> tag to clear the text wrapping. With align="left" you can use the <br clear="left"> tag to clear the text wrapping. Or you can use <br clear="all"> to clear any previous align setting.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268