HTML Images

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.

HTML Images Syntax

<img src="" alt="" >

The src attribute specifies the URL (web address) of the image. "src" attrinute takes the image source, i,e, from where the image will be loaded. "alt" attribute takes "image text placeholder".

The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

If a browser cannot find an image, it will display the value of the alt attribute:

<img src="w3clanlogo.png" alt="w3clan Icon" style="width:128px;height:128px;">

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

The values are specified in pixels (use px after the value):

<img src="w3clanlogo.png" alt="w3clan Icon" style="width:128px;height:128px;">

 Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page.

However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

<img src="/images/w3clan.png" alt="w3clan Icon" style="width:128px;height:128px;">

Images on Another Server

Some web sites store their images on image servers.

Actually, you can access images from any web address in the world:

<img src="http://www.w3clan.com.com/images/logo.jpg" alt="W3Clan.com">

Summary

  • Use the HTML <img> element to define an image
  • Use the HTML src attribute to define the URL/Location/Source of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed or has not loaded yet completely.
  • Use the HTML width and height attributes to define the size of the image

Loading ...

Related Results :

  1. HTML Images
Note :
  • Related Posts are generally User Blog posts.
  • or Other tutorials from other networks of w3clan.com.
  • Any registered user can create related posts based on search term tags.

About the Author