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.
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 :
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 :
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>
My name is Mukesh Jakhar and I am a Web Application Developer and Software Developer, currently living in Jaipur, India. I have a Master of Computer Application in Computer Science from JNU Jaipur University. I loves to write on technology and programming topics. Apart from this, I love to travel and enjoy the beauty of nature.