HTML ImagesHTML Tutorial - HTML Images
Web sites consist of HTML documents and image files (.gif or .jpg). With HTML images can be added to HTML documents to add graphics, photos, and pictures. These images can act as graphic enhancements, background, links, and more.How To Add An Image To A Web Page
With HTML an image file can be added with the <img> tag. The image tag has no closing tag and needs the src attribute in order to specify the source of the image. The value of the src (source) attribute is the location or URL of the image you want to display on the web page.Here is what the HTML code for an image looks like:
<img src="url">
The image tag should always be accompanied by the alt attribute, as well as the height and width attributes in order to validate with an HTML or XHTML validator.
What Is The Alt Attribute or Alt Tag
The alt attribute is used to display alternate text for an image in case the web browser is not able to load the image file. In this case the alt attribute (alt tag) displays "alternate" text describing the image for the user. The alt tag also displays this text in most web browsers when the image is hovered with the mouse pointer.Note: We strongly reccommend the use of alt tags or alt attributes for all images in your web site. The alt tag and it's text is a very important factor in search engine optimization!
Here is what a complete image source code should look like:<img src="images/image.gif" height="50" width="100" alt="This is a test image">
If you now move your mouse pointer over the image file the alt text will be displayed in most web browsers.
Optimize An Image File For The Web
Before you use an image file (photos, pictures, graphics) on a web page make sure the image is optimized for use on the world wide web. Optimizing and image file means that the file size of the image is optimized to the smalles possible file size without compromizing the quality of the image. Most graphic applications let you optimize images for the web. Also make sure your optimized image file has the same height and width as specified in the image source code (img src).If the image file is not optimized for the web it might take a long time before the image loads. This results in long waiting periods for people with slow internet connections.
How To Align An Image
Images can be aligned in several different ways. The align attribute and it's values are being added to the img src code:Vertical Image Alignment:
align="bottom"align="middle"
align="top"
Horizontal Alignment
align="left"align="right"
For more information about how to align an image go to HTML alignment.
How To Add A Hyperlink To An Image
Please visit HTML Links for more information about linked images.More HTML Image Resources
- HTML and Web Site Design
- Adding Links With HTML
- Adding Background Image to an HTML Document
- How to Add Images to Tables
HTML Related Links
- How to Get a Web Site or Online Business Started
- CMS - Content Management System
- How to Choose and Register the Right Domain Name
- Making Revenue - How to Make Money With a Website
- Server and Hosting
© This Article is Copyrighted by WebmasterSeminar.com
Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!LINK TO THIS TUTORIAL:
Copy the code below and paste into your web page
<a href="http://www.webmasterseminar.com/htmlimages.php"> Webmaster Seminar</a><br /> HTML Images - Free Information, Tutorials and HTML Resources