Saturday, 16 June 2018

Chaudhari Karan

HTML – Images

    No comments:


HTML – Images

Hello friends, In this lecture, we will discuss HTML – Images.
HTML – Images


Images are used for design beautify web page. This lecture will take few simple steps to use images in web pages.

Insert Image

In HTML tag are used for insert any image in web page. Here is the simple syntax to use tag.



The image tag has no closing tag. It is contain only attributes-list.

Example

In this example HTML file and image file in the same directory –

HTML Insert Image

Output
HTML Insert Image


In HTML image use PNG, JPEG or GIF image file, but make sure to specify correct image file name in src attribute. The image name is always case sensitive.

The alt attribute is the mandatory attribute, it specifies an alternate text for the image if the image not displayed.

Set Image Location

If all the images in a separate directory. So HTML file in home directory and create the subdirectory images inside the home directory where keep the image.

Example

Assume our image location is "image/alwaysspot.png".

HTML Set Image Location

Set Image Width/Height

We can set image width and height based on our requirement. For set image width and height using the attributes. Attributes can specify width and height of the image in pixels or percentage of its actual size.

Example
HTML Set Image Width/Height


Output
HTML Set Image Width/Height

Set Image Border

The image has a border around it by default, it can specify thickness in pixels using border attribute. The thickness of 0 which means no border around the image.

Example
HTML Set Image Border

Output
HTML Set Image Border

Set Image Alignment

The image is aligned at the left side of the page by default but can use align attribute to set in the right or center.

Example
HTML Set Image Alignment
Output

HTML Set Image Alignment



Subscribe to this Blog via Email :