Html Image

Html is used for web designing and  Images can improve the design and the appearance of a web page.

Adding images to your website or social networking profile is a great way to spruce up your page. The HTML code for adding images is straightforward, and often one of the first lessons for an HTML novice.

Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial will take you through simple steps to use images in your web pages.

The Html provide tag to display image on web page or browser. Html tag is an empty tag that contains attributes only, closing tags are not used with tag. have following attributes;

Atributes

  1. srcare used for specify the source file from where you want to display image.
  2. alt :attribute are used for specify alternate text to display in the place of image when browser is unable to display image. This name is helpful for search engine to find the image on web.
  3. titleattribute are used for specify a title for the image that will be displayed when mouse is placed over the image for few seconds.
  4. heightare used for specify height of image.
  5. widthare used for specify width of image

EXAMPLE

<html>
<head>
<title>Image</title>
</head>
<body>
<img src=”logo%20for%20website.jpg” alt=”logo” title=”html” height=”200px”; width=”250px”;>
</body>
</html>

image-in-html

OUTPUT

codingknack

Change the size of image

  1. Edit the file you want the image to show. eg: default.html.
  2. Add this line to your script. image …
  3. Replace height and width to your wish example height=”25″ width=”25″
  4. Save the file and open the file using any browser to see the effect.

Set Image Location

EXAMPLE

<!DOCTYPE html>
<html>

<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = “/html/images/test.png” alt = “Test Image” />
</body>

</html>

Usually we keep all the images in a separate directory. So let’s keep HTML file test.htm in our home directory and create a subdirectory images inside the home directory where we will keep our image test.png.

Set Image Border

EXAMPLE

<!DOCTYPE html>
<html>

<head>
<title>Set Image Border</title>
</head>

<body>
<p>Setting image Border</p>
<img src = “/html/images/test.png” alt = “Test Image” border = “3”/>
</body>

</html>

By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.

Set Image Alignment

EXAMPLE

<!DOCTYPE html>
<html>

<head>
<title>Set Image Alignment</title>
</head>

<body>
<p>Setting image Alignment</p>
<img src = “/html/images/test.png” alt = “Test Image” border = “3” align = “right”/>
</body>

</html>

By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right.

Chrome Firefox IE Opera Safari Android
   Yes  Yes Yes   Yes Yes Yes

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu