Images in HTML

More options for you.


General KnowledgeEnglish GrammarMathScienceIQ-TestQuiz-Test

Images may increage website value.

table-pic here

We will learn all about Image in this chapter.
Images are done with the <img> tag in HTML.
The <img> tag is called empty tag because it contains attributes only and it has no closing tag.
But it may be closed with a forward slash(/) after keyword(img), like this: <img/>

Syntax of HTML images

<img src="url" alt=" "/>

How to insert image


For inserting image, first open your HTML document and to do as below:

Example:

HTML Editor

<!DOCTYPE html>
<html>
<body>
<img src="bridge.png" alt="bridge pic"/>
<p> The largest bridge in the world </p>
</body>
</html>

Web Browser

The largest bridge in the world

'src' is an attribute of <img> tag, 'src' attribute specifies the source of the image.
It can be used 'alt' attribute in HTML <img> tag.
The 'alt' attribute provide an alternate text for an image, if the image cannot be displayed even a user for some reason cannot view the image(slow internet connection, an error codding etc).
And should be remembered that a web page will not validate properly without the 'alt' attribute.

Image size in HTML

It can be used the style attribute in HTML <img> tag to specify the width and height of the image.
The values are specified in pixels.
For style attribute, to be used px after the value.
But if you directly want to use width and height attribute then no need to use px after the value.
Because, here, the values are specified in pixels by defualt.
Follow as below:

HTML Editor

<!DOCTYPE html>
<html>
<body>
<img src="bridge-2.png" alt="bridge pic" style="width:100px; height:100px;"/>
<p> Style attribute </p>
<img src="bridge-2.png" alt="bridge pic" width="120" height="120"/>
<p> Size(width and height) attribute </p>
</body>
</html>

Web Browser
bridge pic

Style attribute

bridge pic

Size(width and height) attribute

Note: If you store your images in a sub-folder named imges, you must then include the folder name in the src attribute like this:

HTML Editor

<!DOCTYPE html>
<html>
<body>
<img src="images/burj_khalifa.png" alt="bridge pic"/>
<p> The tallest building in the world </p>
</body>
</html>

Web Browser

The tallest building in the world



More options for you.


General KnowledgeEnglish GrammarMathScienceIQ-TestQuiz-Test