HTML Images

HTML Images

Images can improve the design and the appearance of a web page.

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Image</h2>

<img src=”pic_trulli.jpg” alt=”Trulli” width=”500″ height=”333″>

 

</body>

</html>

pic 

 

HTML Images Syntax

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute specifies the URL (web address) of the image:

<img src=”url>

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).

 

The value of the alt attribute should describe the image:

<!DOCTYPE html>

<html>

<body>

 

<h2>Alternative text</h2>

 

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

 

<img src=”img_chania.jpg” alt=”Flowers in Chania” width=”460″ height=”345″>

 

</body>

</html>

 

Alternative text

The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:

Flowers in Chania

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

<!DOCTYPE html>

<html>

<body>

 

<p>If a browser cannot find the image, it will display the alternate text:</p>

 

<img src=”wrongname.gif” alt=”Flowers in Chania”>

 

</body>

</html>

 

If a browser cannot find the image, it will display the alternate text:

Flowers in Chania

Note: The alt attribute is required. A web page will not validate correctly without it.

Image Size – Width and Height

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

<!DOCTYPE html>

<html>

<body>

 

<h2>Image Size</h2>

 

<p>Use the style attribute to specify the width and height of an image:</p>

<img src=”img_girl.jpg” alt=”Girl in a jacket” style=”width:500px;height:600px;”>

 

</body>

</html>

 

Image Size

Use the style attribute to specify the width and height of an image:

Girl in a jacket

Alternatively, you can use the width and height attributes:

<!DOCTYPE html>

<html>

<body>

 

<h2>Image Size</h2>

 

<p>In this example, we specify the width and height of an image with the width and height attributes:</p>

 

<img src=”img_girl.jpg” alt=”Girl in a jacket” width=”500″ height=”600″>

 

</body>

</html>

 

Image Size

In this example, we specify the width and height of an image with the width and height attributes:

Girl in a jacket

The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads

Width and Height, or Style?

The widthheight, and style attributes are valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

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

<h2>Styling Images</h2>

<p>The image below has the width attribute set to 128 pixels, but the stylesheet overrides it, and sets the width to 100%.</p>

<img src=”html5.gif” alt=”HTML5 Icon” width=”128″ height=”128″>

 

<p>The image below uses the style attribute, where the width is set to 128 pixels which overrides the stylesheet:</p>
<img src=”html5.gif” alt=”HTML5 Icon” style=”width:128px;height:128px;”>

</body>
</html>

Styling Images

The image below has the width attribute set to 128 pixels, but the stylesheet overrides it, and sets the width to 100%.

HTML5 Icon

The image below uses the style attribute, where the width is set to 128 pixels which overrides the stylesheet:

HTML5 Icon

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:

<!DOCTYPE html>

<html>

<body>

 

<h2>Images in Another Folder</h2>

<p>It is common to store images in a sub-folder. You must then include the folder name in the src attribute:</p>

 

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

 

</body>

</html>

Images in Another Folder

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

HTML5 Icon

Animated Images

HTML allows animated GIFs:

<!DOCTYPE html>

<html>

<body>

 

<h2>Animated Images</h2>

<p>The GIF standard allows moving images.</p>

 

<img src=”programming.gif” alt=”Computer man” style=”width:48px;height:48px;”>

 

</body>

</html>

 

Animated Images

The GIF standard allows moving images.

Computer man

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

<!DOCTYPE html>

<html>

<body>

 

<h2>Image as a Link</h2>

<p>The image is a link. You can click on it.</p>

 

<a href=”default.asp”>

  <img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”>

</a>

 

<p>Add “border:0;” to prevent IE9 (and earlier) from displaying a border around the image.</p>

 

</body>

</html>

 

Image as a Link

The image is a link. You can click on it.

HTML tutorial

Add “border:0;” to prevent IE9 (and earlier) from displaying a border around the image.

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

 

Chapter Summary

  • Use the HTML <img> element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes to define the size of the image
  • Use the CSS width and height properties to define the size of the image (alternatively)
  • Use the CSS float property to let the image float