In this article we are discussing about Html image tag make hyper link to image set image background, how can we set image as a background image and how can we make image as a hyper link.
HTML IMAGE Tags Definition and Usage
- In this section you will learn about “how the images can be used in HTML”.
- How you can create a page with image as background.
- How you can make a picture as a hyperlink to another file.
- HTML <img> tag is insert image into a web page.
- HTML image path and attributes define or declare inside <img> tag.
- The <img> tag is empty tag, that mean’s no closing tag.
- The <img> tag have some attributes which are use for display image on web page.
- The src attribute, src stands for “source”, in which we define path of image URL.
- Width and Height are important attributes of image which are specifies the size of image to display on web page.
Images are very important to beautify on your web page. Its is true that one single image is worth than thousands of words. So as a Web Developer you should have clear understanding on how to use images work in your web pages.
| Attributes | Values | Description |
|---|---|---|
| alt | “Alternate_Text” | Sets an alternate text which will be displayed if image is missing. |
| align | “Left”, “Right” and “Center” | Sets horizontal alignment of the image value either left, right or center. |
| border | “Size_in_value” | Sets height of the image. This will have a value such as 10 or 20% etc. |
| height | “size_px” | Sets height of the image. This will have a value such as 20 or 30% etc. |
| hspace | “Value_you_Want” | Sets horizontal space around the image. This will have a value such as 20 or 30%. |
| id | “Id_Name” | Sets id of the image with in the document. This will be used if you are using CSS and Script. |
| name | “Name_You_Want” | Name of the image with in the document. |
| src | “Image_Source_URL_Path” | Define URL/PATH of the image file. |
| style | “border=1px;” | This will be used if you are using CSS. |
| title | “Title_name” | Define a text title. The browser flashing the title when the mouse move over the link. |
| width | “size_px” | Sets width of the image. This will have a value such as 20 or 30%etc. |
| valign | “Top”,”Bottom” and “Center” | Sets vertical alignment of the image value either top, bottom or center. |
| vspace | “Value_you_Want” | Sets vertical space around the image. This will have a value such as 20 or 30%. |
Example : HTML Simple Image Tag and Its Attributes.
<html><head> <title> Html Simple Image Tag and Its Attributes Examples </title> </head> <body> <!-- Now we are using Image tag and Its Attributes --> <img align="left" src="URL_path" /> // Define the Path of the image <img border="2" /> // Define the Border of the image <img class="CSS_class_name" /> // Define the CSS Class name if you want apply on the image <img height="200" /> // Define the height of the image <img width="200" /> // Define the width of the image <img alt="Html" /> // Alt Attribute Value Display when Image is not available <img title="Html" /> // Define the Title of the image. <img border="2" width="200" height="200" src="images/learn4better_html.png"" /> </body> </html>
Output :
How to Hyperlink an Image Definition and Usage
To make an image as hyperlink just enter the <img> tag between the <a> anchor tag.And it will get Hyperlinked.
Example : HTML Hyperlink an Image.
<html> <head> <title> Hyperlink an Image Examples </title> </head> <body> <!-- Now we are using Hyperlink an Image --> <img align="left" src="URL_path" /> // This is the simple image <a href="http://phpkida.com/"> <img src="http:http://phpkida.com/phpkida1.png" border="2" /> </a> // Define the Hyperlink of Image </body> </html>
Output :
How to create the page with image as Background Definition and Usage
To make an image as Background that is the attribute of the <body> tag enter the <body background=”path of image”> this page will get background image.
Example : HTML background an Image.
<html> <head> <title> Background an Image Examples </title> </head> <body background="background:url(images/main-bg.png)"> <!-- Now we are using Background an Image --> Here we are Using Image as a Background </body></html>