html code- Image attribute

Web page can add images to add to the image tag. There is no end tag. The zero elements is a graphics file from the server to the browser, and the place where the element is located in the image, the image will be put that place. The tag with the image file name is used for the src attribute. Format is :

Src (Source of the short form) attribute is required for the image elements. Where is this attribute image file the URL tells about it. Format is :

Alternative text:

For the substitute of the image to display a text the attribute is used. If the browser fails to display an image at that time the image of the text will provide notional indication. Format is:

Size :

To enlarge or shorten the size of the images HEIGHT AND WEIGHT these two types of attributes can be used.  For example:

Adding images in the HTML file :

Normally there are two types of files in the Web page, One is an HTML file and other is image file. To add an image on HTML pages at least one attribute is must that is src  attribute and which has no end tag. To add an image on the web page, html coding format is

First, an image file of your choice put in the computer in a folder or on the desktop. Then, type the following codes by notepad where is the image file in the same folder at that place save the codes as image hasif.html. Now, if you open the saved HTML file, you will see the output right of the browser like the following.

Images and HTML files must be placed in the same folder or in the same directory or to the same location. To add the image coding format is like the following:

If you want to add an image from a different directory or folder a sample of coding would be like the following:

In the above image has been loaded from an another website, so the full path of the location of the image that you have to identify.

For example:  To add an image.

Place the image:

In the middle of the text content or beside, the effects of establishing images are shown below:

Before paragraph:

As paragraph is a block level element it starts from a new line.

At the beginning of the paragraph:

The first line will be aligned with the graphics. However, if the image position is at the end of paragraph it should be aligned in the last line.

Between the two paragraphs:

The image can be seen in the middle of the contents of the paragraphs.

Image Border:

The image with the default is no border. Using the image of the four sides of the border and border attributes can be added. Specifies how wide the border will have to pay for the pixel value. The syntax is:

 Image alignment:

To manage the best accommodation on the website, aligned picture can help you and your visitors will be able to read the Web site easily. Using Align attributes on the Web page the positions of the image can be formatted in various ways. With this attribute variety of other values are used:

Top: If this value is used the text will be placed on the image.

Middle: If this value is used the text will be placed in the middle of the image.

Bottom: If this value is used the text will be placed under the image. (Default).

Left: If this value is used the text will be placed on left of the image.

Right: If this value is used the text will be placed on the right of the image.

Alignment to the right side of the image:

Add text to the four sides of the image:

Imaging spacing:

To determine the open space around the image, the hspace and vspace these two attributes are used.

vspace:  vspace means Vertical space; Spaces will be created above and below the image.

hspace: hspace means horizontal space; the space will be created on the left and right side of the image.

Figure element:

Using the figure element too, the image can be added on the web page. The format is:

Figure caption element:

Using the figure caption element too, the image caption can be added on the web page. For this the syntax is:

Shadow added the caption:

Example: Two

Adding multiple images:

Multiple images can add to html page. If you add more images to Web page then it will take extra time to load the web page fully. So, work carefully with the image. For this reason collect as much as possible fit image to add.

Adding images using the object tag.

To display the image on the web page object tag can be used as an alternative to the image tag. The location of the image can be set using data attributes with this tag. For this the coding format is ——


Leave a Reply

Your email address will not be published. Required fields are marked *