HTML Images

68
views
html images

An image on a web-page increases the viewer’s interest and also improves the appearance and design of the web-page.

Images can explain better than words. You must use images in your website wherever appropriate.

One thing you must remember is that image tag is a single tag (empty tag). It doesn’t have any closing tag.

1src Attribute

In link element, the href attribute was used to specify the URL of an image, web-page or any file. But in image element, the src attribute is used to specify the URL of an image.

You can also specify the relative path (if linking within site) to the image as discussed in the links chapter.

2alt attribute

The second thing to remember is the alt attribute. It is required to create a valid image element.

The alt attribute is to provide an alternate name to the image file due to the following reasons-

  • If the image doesn’t open due to slow connection then alt name is displayed.
  • People using screen readers can know about the image. (useful for blind users)

3width and height attributes

Third important thing is to specify the height and width of the image. If it’s not specified then the screen might flicker.

These both are measured in pixels. (pixels is the standard unit for measuring anything on a screen)

By default, the units of height and width are considered in pixels (px). Therefore no need to specify the units.

4style attribute

Suppose you have specified the CSS for height and width of all images in your CSS file like this-

Because of the above CSS, all the images will appear with the height of 200px and width of 300px. This CSS will also overwrite the height and width attributes of all images.

But, in case you want any particular image to appear with the height of 500px and width of 800px then, you can write the inline CSS for that image using style attribute.

Now the CSS won’t overwrite because of this particular image element because it has its own inline CSS specified.

Its good practice to specify height and width using inline CSS to avoid overwriting of height and width HTML attributes.

You can always specify additional styles inside the style attribute like padding, margins, border, float etc (explained in CSS chapters).

5Linking to an external image

You can always link any image from any website using the absolute URL of that image. Make sure that the path ends with the image file like .jpg or .jpeg or .png or .ico or .gif

Specify the absolute URL in src attribute and you are done!

Output
4coals Portrait

6Image as a Link

You can convert any image to a link by wrapping it inside the <a> and </a> link tags.

For example, when you click the logo image of a website it takes to the homepage. That’s because the logo image is wrapped inside the link element with src attribute specified with destination URL.

Click on this output to check the behavior of image link.

Output

ultraxart logo

More possibilities with images will be discussed in advance HTML images chapter. like image maps, picture element, background images.


LEAVE A REPLY

Please enter your comment!
Please enter your name here