HTML Images

HTML Images

The HTML image tag is an empty tag means it does not have a closing tag. It has the following required attributes namely src & alt. The src attribute is used to provide a path of the existing image while the alt attribute shows a message when the image path is not correct or missing.

General syntax for HTML image element:

Basic Syntax



Example


Try It Now

This is a paragraph having an image tag also. The image can be aligned on the left side by using the CSS cascade style sheet rule. Images width and height can also adjust by a CSS rule.

Example

Source Code

Try it now

Here, the src refers to the address of the image while the alt attribute specifies the image name which will be visible when the image address is not to be correct.

Image Width And Height

Width and height can be set either by <img> width or height attributes of a CSS style.

Statement


Try It Now

Source Code

Try it now

Width and height can be set by <img> width and height attribute.

Assigning Image Width & Height Using CSS

Statement


Try It Now

Source Code

Try it now

Note: Please keep in mind that image width and height can be set using CSS.

Positioning Of Images

Images can be positioned either left or right by the CSS cascade style sheet rule.

Image:Left Alignment

Statement


Try It Now

Source Code

Try it now

CSS float: The left property is used to assign the HTML element to the left of the content while float: right property is used to assign the HTML content to the right of the content.

Image:Right Alignment

Statement


Try It Now

Source Code

Try it now

Image can also be shift right to the content using CSS float: right property.

Providing Link To The Images.

General Syntax


Try It Now

Source Code

Try it now

Images link will be provided by an anchor tag <a> element. it has also a closing tag </a> and attributes href that provides the linking address of the web page.

Path Determination Of Images

Statement

If an image exists within display.html then it's path will be.

General Syntax


Explanation -If movement is done from parent to child folder then use forward-slash(/) for every folder.

Source Code

Try it now

Explanation -If movement is done from parent to child folder then use forward-slash(/) for every folder.

There is also another case can be exist.

Folder Orientation


Image path existing into display.html will be:

Statement


Try It Now

Please remember that, to move one directory up, you must have to use (../).

Source Code

Try it now

Please remember that, to move one directory up, you must have to use (../).

Online Test / Quiz