HTML IMAGES


  •  HTML Images are indeed needed or required for any web site.
  • Images help a web site become more attractive for visitors. Imagine a web page without even a single image would you still browse it? Of course not.
  • To put an image on our web site we simply need to use the <img> element with an src attribute to define the URL or the location of an image.
  • The <img> is an empty and inline element.

Attribute src

We use the src attribute to specify an image's URL or file path.

Example:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Image attribute src </title>

        </head>

        <body>

            <img src="example.jpg" />

        <body>

<html>

Attribute alt

Sometimes images may not load on the user's browser because of slow internet connection, slow server, image is deleted from directory or wrong URL value is specified in the src attribute.

The alt attribute provides an alternate text for an image.

Example:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Image attribute alt</title>

        </head>

        <body>

            <img src="example.jpg" alt="Iam an alternative text for the image" />

        <body>

<html>

Image Sizing (width and height)

To resize an image we just need to use the width attribute to change its width and the height attribute to change its height. The value is typically in pixels.

Example:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Image sizing </title>

        </head>

        <body>

            <img src="example.jpg" width="350" height="400 />

        <body>

<html>

Floating Image (left or right)

We can float an image to the left or right side of a text. To achieve that we need to use the style attribute. With the float CSS property. And left or right value. Here is a lesson for HTML Styling.

Example:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Image floating </title>

        </head>

        <body>

            <p><img src="images/star.png" style="float: left width:50px; height:50px;" /> </p>

               <p> <img src="images/star.png" style="float: right; width:50px; height:50px; /> </p>

        <body>

<html>

Image as a Link

There are some situations that we need an image to act as a link.

To do that just enclose the image with an <a> element with its href attribute.

Example:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Image Links</title>

        </head>

        <body>

            <a href="http://www.example.com"> 

                <img src="example.jpg" />

               </a>

        <body>

<html>

Image From External Server

Sometimes we need to put images from other web sites like Facebook, Google or Imgur to our web site. Here is how to do that:

Example:

<! DOCTYPE html> 

<html> 

        <head>

            <title> Image Links</title>

        </head>

        <body>

            <img src="http://www.example.com/image.jpg" />

        <body>

<html>

HTML File Paths

An HTML File Path specifies the location of a file in a web site's directory or folder structure.

Usually file paths are used to link to the following:

  • Web Pages
  • Images
  • Style Sheets
  • Scripts

Absolute File Paths

Absolute file paths are used to link to an internet files that can be accessed by anyone.

The example below links to an image.jpg file located in the root directory of http://www.example.com.

Example:

<img src="http://www.example.com/image.jpg" />

Relative File Paths

Relative file paths are used to link to files in your own web site's folder structure.

It is recommended as it will work even if you change your 

domain name.