HTML Images

Prev
Next

You should use HTML images to add a picture to your website. If you add a picture or a photo or portrait or drawing to your website, then your website looks more colorful and beautiful.

Humans love images and pictures. A website with attractive and good looking images changes the look and feel of the website to a great extent.

HTML image tutorial

src

You have to use src attribute along with an img tag to insert an image in your website. Source attribute(src) provides the address(path) or source from which the image will be picked.

In the example below, the image is present in the ‘img’ folder which is 1 level up where the HTML file is present.

Example

<img src="img/newborn.jpg">
Run the Code

HTML Images Border

Let us see how you can give border for an image. 

You can use the ‘border‘ attribute to give the border for an image or picture.

HTML Images Border

Example

<img src="img/girl-with-border.jpg"  border = '5' alt="Beautiful Girl with a white horse"/>
Run the Code

Image Alignment

Align attribute is used to align the image in HTML.

Example

<img src="img/nature_3106213_640.jpg" width="200" height="320" alt="Tulips" align="right"/>
Run the Code

HTML alt Tag Attributes

If the user cannot view the image due to any reason(mostly because the image is missing or the path is wrong),  then <alt> attribute is used to show a  text message related to that image. It means that ‘alt’ specifies that if an image is not shown then you can display text about the given image.

Example

<img src="Tulips.jpg" alt="Tulipsflower" width="460" height="345">
Run the Code

Note/improvement:
All the images in your website should have an “alt” tag because the Search Engines like Google can read the text present in the “alt” tag so it improves the SEO(Search Engine optimization)  of your website.

width and height of the image

You can change HTML images size as per your requirement using width and height attribute.

Example

<img src="img/purpleflower.jpg" width="150" height="270">
Run the Code

Style attribute for images

You can also use style attribute to change the image size and this is discussed in detail in CSS(cascading style sheets) but we will show a basic example on how you can give style for your HTML images.

Note/improvement:
The style attribute is just provided as a reference here. If you want to master the complete style attribute, you have to refer our CSS tutorials.

Example

<style>
 img {
   width: 50%;
   height: 30%
 }
</style>
Run the Code

Interview Questions & Answer

<!DOCTYPE html>
<html>
<body>
<h2>Example for src Attribute</h2>
<p>In HTML source attribute uses img tag to define the location or path where the image is present</p>
<img src="https://www.tutorialbrain/cutechild.jpg"/>
</body>
</html>

If the user cannot view the image due to any reason,  then <alt> attribute is used to show a  text message related to that image. It means that ‘alt’ specifies that if an image is not shown then you can display text about the given image.

<html>
<body>
<h5>Align image. This image is shifted to the right</h5>
<img src="Desert.jpg" width="200" height="320" alt="Desert" align="right">
</body>
</html>

You can use the “border”attribute to give the border for a picture.
Example,

<!DOCTYPE html>
<html>
<body>
<h2>Example for a border of an Image</h2>
<img src="Girlonhorse.jpg" width="400" height="420" border ="5">
</body>
</html>

To make a picture into a background image of a web page, you need to use background-image attribute

Here, replace the “Desert.jpg” with the name of your image file which you want to display on your web page.
For example,

<!DOCTYPE html>
<html>
<head>
<title>Example of cite tag</title>
</head>
<body style="background-image:url(Desert.jpg)">
</body>
</html>
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!