WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML Images


JPG Images

Mountain View

GIF Images

PNG Images

Graph

Example

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>
</html>
Try it Yourself »

HTML Images Syntax

In HTML, pictures are characterized with the <img> tag.

The <img> tag is void, it contains properties just, and does not have an end tag.

The src property determines the URL (web address) of the image:

<img src="url" alt="some_text">

The alt Attribute

The alt quality indicates a substitute content for a picture, if the picture can't be displayed.

The alt quality gives elective data to a picture if a client for some reason can't see it (in view of moderate association, a blunder in the src property, or if the client utilizes a screen reader).

If a program can't discover a picture, it will show the alt text:

Example

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »

The alt quality is required. A website page won't approve accurately without it.


HTML Screen Readers

A screen peruser is a product program that can peruse what is shown on a screen.

Screen perusers are valuable to individuals who are visually impaired, outwardly weakened, or learning disabled.

Image Size - Width and Height

You can utilize the style credit to determine the width what's more, tallness of an image.

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

Example

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »

Alternatively, you can utilize width and height properties. Here, the qualities are indicated in pixels by default:

Example

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Try it Yourself »

Width and Height or Style?

Both the width, tallness, and style characteristics are substantial in the most recent HTML5 standard.

We recommend you utilize the style characteristic. It keeps styles sheets from evolving the first size of images:

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
    width:100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>
Try it Yourself »

Images in Another Folder

If not determined, the program hopes to discover the picture in indistinguishable envelope from the web page.

However, usually to store pictures in a sub-envelope. You should then incorporate the organizer name in the src attribute:

Example

<img src="/pictures/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »

Images on Another Server

Some sites store their pictures on picture servers.

Actually, you can get to pictures from any web address in the world:

Example

<img src="http://www.welookups.com/pictures/welookups_green.jpg" alt="welookups.com">
Try it Yourself »

Animated Images

The GIF standard permits energized images:

Example

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Try it Yourself »

Note that the language structure of embeddings enlivened pictures is the same as non-energized images.


Using an Image as a Link

 To utilize a picture as a connection, just home the <img> tag inside the <a> tag:

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Try it Yourself »

Image Floating

Use the CSS skim property to let the picture float.

The picture can buoy to one side or to one side of a text:

Example

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The picture will buoy to one side of the text.
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The picture will buoy to one side of the text.
</p>
Try it Yourself »

Image Maps

Use the <map> tag to characterize a picture map. A picture map is a picture with interactive areas.

The name property of the <map> tag is related with the <img>'s; usemap trait and makes a connection between the picture and the map.

The <map> tag contains various <area> labels, that characterizes the interactive zones in the picture map:

Example

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Try it Yourself »