html code- Image attribute

Image tag is used to add image in web page. There is no end tag. This zero element asks the browser to find a graphics file from the server and the place where the element is located there you have to put that image. SRC attribute is used to give the image file name with this tag.

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:<img src=”picture1.jpg”>

ALT (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:

<img src=”pic1.jpg” alt=”Here is your alternate text”

Size :

To enlarge or shorten the size of the images height and weight these two types of attributes can be used.

size ar table hobe

Coding Format:
<img src=”example.gif” alt=”example” width=”250″ height=”150″>

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 an image file. To add an image on HTML pages, at least one attribute is must that is search attributed and which has no end tag. Images and HTML files must be placed in the same folder or in the same directory or in the same location. To add the image coding format is like the following:

<img src=”picture1.jpg”>

If you want to add an image from a different directory or folder a sample of coding would be like the following:
<img src=”file://D:html/image.jpeg” height=”200″ width=”150″

If you want to add an image from a different location a sample of coding would be like the following:
<img src=”http://www.badc.gov.bd/image.jpeg” height=”200″ width=”150″

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

To add an image.

First, an image file of your choice puts on 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 in 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.

HTML Code:

<!DOCTYPE html>
<html>
<body>
<img src="ganesh.jpg" width="300 px" height="350 px">
<p><small><strong>figure:</strong>Deputy Assistant Director, BADC,Dhaka</small></p>
</body>
</html>

Display in Browser:

adding image

 

 

 Adding two multiple images:

Multiple images can add to html page. If you add more images to a 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 a possible fit image to add.

HTML Code:

<!DOCTYPE html>
<html>
<body>
<img src="man.jpg" width="200 px" height="150 px" alt="man">
<img src="women.jpg" width="200 px" height="150 px" alt="women">
</body>
</html>

Display in Browser:

multiple image

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.
Coding format:
<object data=”image.jpeg” height=”200″ width=”150″>

Example:

HTML Code:

<!DOCTYPE html>
<html>
<body>
<p>
<object data="baby1.jpg" width="150 px" height="175px"></object> 
<object data="baby2.jpg" width="150 px" height="175px"></object> 
<object data="baby3.jpg" width="150 px" height="175px"></object> 
</p>
</body>
</html>

Display in Browser:

object image

Place the image:

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

table hobe
Example:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<style>p{font-family:verdana;}</style>
</head>
<body>
<img src="computer1.jpg" width="150" height="120"/>
<p>This is first picture of computer</p><hr/>

<img src="computer2.jpg" width="150" height="120"/>
<p>This is second picture of computer</p><hr/>

<img src="computer3.jpg" width="150" height="120"/>
<p>This is third picture of computer</p><hr/>
</body>
</html>

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.
Syntax:
<img src=”pic1.png” border=”2″>

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:

table hobe
Syntax:
<img align=”left|right|middle|top|bottom”>

Example: <img src=”women.gif” width=”32″ height=”32″ align=”left”/>

Aligned to the right side of the image:

HTML Code:

<!DOCTYPE html>
<html>
<body>
<img src="women.jpg" width="300" height="350" align="right"/>
<p>Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. </p>
</body>
</html>

Display in Browser:

Aligned to the left side of the image:

HTML Code:

<!DOCTYPE html>
<html>
<body>
<img src="women.jpg" width="300" height="350" align="left"/>
<p>Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. Right side of the webpage image can be aligned by using this code. </p>
</body>
</html>

Display in Browser:

align left

Add text to the four sides of the image:

HTML Code:

<!DOCTYPE html>
<html>
<body>
<img src="man.jpg" width="300" height="350" align="left"/>
<p>Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image.<br clear="all"/>Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image. Add text to the four sides of the image.</p>
</body>
</html>

Display in Browser:

four side image

Imaging spacing:

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

Syntax:

<img…. vspace=”pixels” hspace=”pixels”>
Coding sample:
<img src=”image.jpg” align=”left” vspace=”30″>
<img src=”image.jpg” align=”left” hspace=”30″>
<img src=”example.jpg” vspace=”5″ hspace=”5″>

Image attribute: hspace

HTML Code:

<!DOCTYPE html>
<html>
<body>
<h3>image with hspace</h3>
<p><img src="women.jpg" alt="nice women" width="350" height="300" align="left" hspace="25"> This is a picture of man. This is a picture of man. This is a picture of man.  </p>
<p>This hspace attribute is not supported in HTML5. You can ue css instead.</p>
</body>
</html>

Display in Browser:

hspace

Image attribute: vspace

HTML Code:

<!DOCTYPE html>
<html>
<body>
<h3>image with vspace</h3>
<p><img src="women.jpg" alt="nice women" width="80" height="100" align="left" vspace="35"> This is a picture of man. This is a picture of man. This is a picture of man.  </p>
<p>This hspace attribute is not supported in HTML5. You can ue css instead.</p>
</body>
</html>

Display in Browser:

vspace

Figure element:

Using the< figure> element too, the image can be added to the web page.
Format:
<figure><img src=”your image file with full path”/></figure>
Example:

<!DOCTYPE html>
<html>
<style>
<figure{border: 2px solid black; border-style: solid;}
</style>
<body>
<figure>
<img src="baby1.jpg" width="200 px" height="150 px">
<img src="baby2.jpg" width="200 px" height="150 px">
<img src="baby3.jpg" width="200 px" height="150 px">
</figure>
</body>
</html>

Figure caption element:

Using the figure caption element too, the image caption can be added to the web page.
Syntax:

<figcaption>Here some descriptions </figcaption>
Example:

HTML Code:  

<!DOCTYPE html>

<html>
<body>
<h3>Implementation of figure and figcaption tag.</h3>
<figure>
<img src="laptop.jpg" width="200 px" height="150 px">
<figcaption> Fig.1- This picture represents a Laptop image.</figcaption>
</figure>
</body>
</html>

Shadow added the caption:

Example:

HTML Code:

<!DOCTYPE html>
<html>
<style>
<figure{border: 2px solid black; border-style: solid;}
<figcaption{font-family: Arial; padding: 10px; background:#fa4b2a; color:#fff;}
</style>
<body>
<figure>
<img src="computer.jpg" width="200 px" height="150 px"><br>
<figcaption>Fig.1- This picture represents a computer image.</figcaption>
</figure>
</body>
</html>

Display in Browser:

shadow figcaption

Leave a Reply

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