Course Content
HTML Introduction
0/1
HTML Editors
0/1
HTML Basic Tags
0/1
HTML Elements
0/1
HTML Attributes
0/1
HTML Headings
0/1
HTML Paragraph
0/1
HTML Text Formatting
0/1
HTML Meta Tags
0/1
HTML Quotations
0/1
HTML Comments
0/1
HTML Images
0/1
HTML Background
0/1
HTML Colors
0/1
HTML Lists
0/1
HTML Tables
0/1
HTML Forms
0/1
HTML Spell Check
0/1
HTML Media
0/1
HTML Marquees
0/1
HTML CSS
0/1
HTML Links
0/1
HTML Block & Inline
0/1
HTML Classes
0/1
HTML Id
0/1
HTML I frames
0/1
HTML Java script
0/1
HTML File paths
0/1
HTML Layout
0/1
HTML Responsive
0/1
HTML Computer Code
0/1
HTML Tutorial
About Lesson

HTML Images

In this tutorial, we will learn about Images and its size, border and alignment in HTML with the help of examples.


Images Element

Images are very important to improve the design and appearance of a webpage.
Web pages without images look boring and uninteresting. Users can add images on their websites by using an image tag.

  • An HTML image element is used to add images on a webpage.
  • The <img> tag is an empty tag, which means it can contain only a list of attributes.x
  • The <img> tag is an empty tag, which means it can contain only a list of attributes.
  • The <img> tag only consists of an opening tag.

Syntax

<img src = "URL" alt = "alternate text">

Image Tag Attributes

 

src Attribute

  • Specifies the path(URL) of the image.
  • src stands for source. It is used to tell the browser where to find the image you want to display.
  • The URL provides the location to the browser where the image is stored.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Image tag attr</title>
  </head>
  <body>
    <img src = "./html.jpg">
  </body>
</html>

Output


alt Attribute

  • The alt attribute provides an alternate text for an image.
  • If the browser cannot display or find the image, it will display the value of the alt attribute.
  • The alt attribute is used when the user cannot view the image for some reason (because of slow internet connection, an error in the src attribute, and so on).

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Image tag attr</title>
  </head>
  <body>
    <img src = "./html.jpg" alt = "image did not display">
  </body>
</html>

Output

image did not display

width and height Attributes

  • The width and height attributes are used to specify the width and height of an image.
  • The width and height attribute always defines the width and height of an image in pixels, but other units used as well like %, rem, em, etc.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Image tag attr</title>
  </head>
  <body>
    <img src = "./html.jpg" alt = "image did not display" width = "60" height = "70">
  </body>
</html>

Output


border Attribute

  • By default, the image will have a border around it.
  • By using border attribute we can change the thickness of the border.
  • If The value of the border attribute is 0, that means no border around the picture.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Image tag attr</title>
  </head>
  <body>
    <img src = "./html.jpg" alt = "image did not display" border = "5px">
  </body>
</html>

Output

image did not display

align Attribute

  • By default, an Image will align at the left side of the page.
  • By using align attribute we can align the image to center or right.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Image tag attr</title>
  </head>
  <body>
    <img src = "./html.jpg" alt = "image did not display" align = "center">
  </body>
</html>

Output

image did not display

 

Exercise Files
No Attachment Found
No Attachment Found
error: Content is protected !!