Images in Web Pages:
Inserting graphics and pictures into your web pages is really easy. The HTML element IMG used for this purpose is. It´s an empty (stand-alone) element, which means that it only has an opening tag and neither content nor a closing tag. Images are used in HTML documents for the following purpose.
1. Make the page visually effective and
2. Display information. Images can also be used as links.
I. Inserting Image with in the Document:
To insert image with in the documnet <img> tas is used. The different attributes of IMG tag are as follows:
You May Also Like:
Features of HTML
Structure of HTML Document
HTML Formatting Tags
Different Types of Lists in HTML
1. SRC
To display an image you need to specify the URL of the image using the src attribute, replacing url with the filename of your image.
src="pic.jpg" [the filename if the image is in the same directory as the html file.]
2. Alternate Text - <alt>
The alt attribute defines the text shown in place of an image when the image cannot load. This is actually a required attribute for valid html, and should briefly describe what the image normally would.
3. Image Size – (width and height attributes)
An image will normally be shown actual size, but by using the width and height attributes you can change the displayed size. You can specify the size in pixels or as a percentage.
4. Border - <border> tag
You can add a border by specifying the thickness in pixels. You can also set border="0" to remove the border added when images are used as links.
5. Image Alignment - <align> tag
Normally an image appears at the place specified in the html code and as with any other tag. However, you can align an image with the surrounding text or paragraph by setting any of align="left | right | top | bottom | middle".
6. Spacing - <vspace> and <hspace> tags
You can adjust the whitespace or runaround space around an image, in pixels. Use vspace to adjust the vertical spacing above and below, or hspace for the left and right sides.
Example:
<html>
<body>
<p><img src="/pic.jpg" alt="example"></p>
</body>
</html>
II. Images as Background:
When we think of an HTML background, we generally have only two options: a solid background color or a background image. HTML background attribute is used to place pictures in the background of HTML page. The general syntax is as follows:
<html>
<body background="image.jpg">
<h1> This is example text</h1>
</body>
</html>
You May Also Like:
Tables in HTML
HTML Css(Cascading Style Sheets)
Forms in HTML
Different CSS Properties
