HTML Images

HTML Images

In HTML, we can add images using the IMG element. The syntax is as follows:

<IMG SRC = “untitled.png” >

Where SRC is the source file for the image.

src

If the computer cannot display the image it will display a box as above.

Alignment of images with text

In an HTML document we can align the image in 3 ways. These alignments can be specified by Align attribute this will be discussed in the next section. However we can take 3 possible values to align the image using Align attribute. They are as follows:

  1. ALIGN = top
  2. ALIGN = bottom
  3. ALIGN = middle

The ALIGN = bottom is default. The first one aligns the top image with the text written with it at the top. The ALIGN = middle aligns the middle image with the bottom of the text and ALIGN = bottom aligns the image and the text that is written at the bottom.

Inline images

In an HTM document, images are added if they are the large letters or words in a line that are surrounded by text. By default, when we add images, the bottom of the image is automatically aligned with bottom of the text.

There is no special wrapping of the text around the image as we do in Microsoft word. But it is not guaranteed that the image will appear in a particular place or not.

SRC

SRC is also an attribute that is used in the IMG element. IMG is used to include images to the HTML document. SRC is basically a source file for the image. SRC is also a URL that is a uniform resource locator that points to the image file. Consider the following example to understand SRC:

<IMG SRC = “untitled.png” >

img-src

The result is as follows:

result

The ALT attribute

This attribute represents an alternative text for the images in HTML document. It is used with the IMG element. The ALT attribute is used to specify the text that is used as the alternative for the image. For example:

<IMG SRC = “untitled.png” ALT = “The alternative text for the image” >

If the connection is weak or some other problem the alternative text will be printed as follows:

alt

Image formats

There are many ways that can be used to store the images including the digital formatting. On the WWW or World Wide Web, the most widely used image format is GIF or Graphic Interchange Format. Its file name extension is .gif. GIF is the only format that can be displayed inline by all the browsers.

The JPEG or JPG is also good for storing photographic images. The JPEG and GIF stores the images in a compressed format. It means that they have a small size and will take less memory when downloaded.

Images sizes and Colors

Some World Wide Web browsers limit the images to fewer Colors; the browser can display more than one image at the same time. The graphic computer can display 256 Colors, if our browser takes 50 Colors per image, we can display only five images.