Learning HTML Part 11 : How to add Images in HTML (Image tags)


After learning about the Format of the Text in the HTML, the HTML learning tutorials in this time we will learn Learning HTML Part 11: how to add images in HTML (image tags).

It’s hard to imagine an HTML page without images to current web standards. Learn HTML tutorial on how to add images in HTML we will learn how to use image tags. The Image tag is used to display an image into a web page, use <img>.

Src Attributes in the Tag <img>

The attribute src stands for a source, is the attribute that contains the address of the image that will be displayed. This address can be relative or absolute. (the difference in relative and absolute address is the address that we discuss on learning HTML: Create Hyperlinks In HTML).

For example, the HTML code on this image, provide an image that will be used as a display and place these images into a single folder with sample pages. Images can be JPEG, PNG, or GIF.

Pada contoh dibawah ini saya menggunakan sebuah gambar koala.jpg yang berada dalam satu folder dengan halaman HTML saat ini. Savelah sebagai img.html

Example of using the tag <img>:

Note that the tag <img> has no elements, so directly closed with />

An example of adding an image in HTML

The alt Attribute in the Tag <img>

Image tag also has other important attributes, i.e. alt

The alt attribute is an abbreviation of the alternative description, where alt is used for the description of the image if the image fails to be displayed by the browser. Or if these have web gives a chance to not display images.

Examples of the use of the alt attribute in the tag <img> :

The attributes width and height in the tag <img>
Other attributes allow us to determine which of the displayed image, i.e. width and height.

An example of the attributes width and height on tags <img> :

Example image dimensions in the HTML

On the use of the above image tags, the image looks disproportionately, this is because the use of the attributes width and height ‘ forcing ‘ the image to appear with the value we set.

To maintain the proportions of the picture, yet still make the image be big/small, put just one of the attributes (width or height, but not both). For example if we set the attribute width = 300px (without listing the height), then the web browser will display an image with a width of 300px, and automatically calculates the height of the image so that the image remain proportional.

To display the data, whether it comes from databases or from other sources, it would be neat if using tables. Learning basic HTML tutorial in the next, we will discuss about how to create a table in HTML using the tag<table>.


Please enter your comment!
Please enter your name here