Html image tag make hyper link to image set image background

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.

AttributesValuesDescription
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 :
Html

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>

Leave a Reply

Related Posts: You may like

html5 video tag Complete Guide

How to get multiple selected values of select box in php

Responsive contact form html css

How to increase size of radio button

Tools:

Crypto Currency

PHPKIDA provides free online the best real-time crypto market price, news, predictions, index with graphs & historical data for 2000+ coins including bitcoin, ethereum, & altcoins from major cryptocurrency exchanges.

Visite Tool

Icon Generator

PHPKIDA provides free online icon generator. Our icon generator help you to edit, modify, resize and customize icon for your website and applications. Convert to a shap you like add icon border, you can change icon border color, border size, background color, icon shadow, icons color, icon size in your own way and save it as a png image.

Visite Tool

Youtube Video Downloader

PHPKIDA provides Free online YouTube video downloader to download YouTube videos quickly in MP4, 3GP, and more. Search your video and free fast download youtube videos.

Visite Tool

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.