KodeInfo | Learning resources for web and mobile development

HTML Images

September 11th, 2014 19:17:06 by Irfan Iqbal Comments(0) - Views(6422)

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 (source) attribute defines the url (web address) of the image:

SYNTAX:

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

EXAMPLE:

<!DOCTYPE html>
<html>

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

</html>

 

The alt Attribute:

The alt attribute specifies an alternate text for the image, if it cannot be displayed.

The value of the alt attribute should describe the image in words:

EXAMPLE:

<img src="html5.gif" alt="The official HTML5 Icon">

HTML Screen Readers:

Screen readers are software programs that can read what is displayed on a screen.

Used on the web, screen readers can "reproduce" HTML as text-to-speech, sound icons, or braille output.

Screen readers are used by people who are blind, visually impaired, or learning disabled.

  • Screen readers can read the alt attribute.  

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 behind the value):

Alternatively, you can use width and height attributes.

The values are specified in pixels (without px behind the value): 

Width and Height or Style?

Both width and height and the style attribute, are specified in the HTML5 standard.

Since both are allowed, you are free to choose which one to use.

Note: Using the style attribute prevents external styles to set default size to 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>

 

Images in Another Folder:

Browsers expect that the url (web address) of an image, is the same as the url of the HTML page.

If not specified, it is expected that images are stored in the same folder as the web page.

However, it is common on the web, to store images in a sub-folder, and refer to the folder in the image name:

EXAMPLE:

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

 

Using an Image as a Link:

It is common to use images as links:

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

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

We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.

OUTPUT:

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

HTML tutorial

We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.

Image Maps:

For an image, you can crate an image map, with clickable areas:

IMAGE SUMMARY:

  • Element to define images
  • Use the HTML src attribute to define the image file name
  • Use the HTML alt attribute to define an alternative text
  • Use the HTML width and height attributes to define the image size
  • Use the CSS width and height properties to define the image size (alternatively)
  • Use the CSS float property to define image floating
  • Use the CSS usemap attribute to point to an image map
  • Use the HTML  element to define an image map
  • Use the HTML  element to define image map areas

 

Author

  • Irfan Iqbal
    Irfan Iqbal

    Irfan is a web developer and consultant from India. He is the co-founder of KodeInfo, the PHP and Laravel Community . In the meantime he follows other projects, manages everything related to marketing and seo for kodeinfo , works as a freelance backend consultant for PHP applications and studies IT Engineering . He loves to learn new things, not only about PHP or development but everything.

Related

WHY USE A FRAMEWORK OVER PLAIN PHP

WHY USE A FRAMEWORK OVER PLAIN PHP
read more

GETTING STARTED WITH LARAVEL

GETTING STARTED WITH LARAVEL
read more

UNDERSTANDING LARAVEL STRUCTURE

UNDERSTANDING LARAVEL STRUCTURE
read more

UNDERSTANDING LARAVEL ROUTES

UNDERSTANDING LARAVEL ROUTES
read more

comments powered by Disqus