in

Learn HTML For Beginner (Part 6: Image Related Element)

Image is one of the most important media in web pages. Almost every website has images as content or as decoration to enhance the appearance of the website. The logo that is the identity of a website is usually also made of images.

In this chapter, we will discuss in detail how to use images in HTML, including how to create image maps and figure elements.

Image Element

To be able to input images into web pages, HTML provides the img element. In order to display images in a web browser, the <img> tag requires several attributes, we will discuss them one by one.

The <img> tag is included in the inline-level element, so it will follow the flow of the text where the tag is placed. The <img> tag is also a void element, and does not require a closing tag </img>.

Atribut Src

The src attribute (short for source) functions to write the address of the image to be displayed. This address can be either an absolute address or a relative address (regarding the difference in writing this address we have learned in chapter 6 when discussing the <a> tag).

Technically, we are not actually ‘entering images’ or ‘inserting images’ into the page, but creating a ‘link’ to the image. But to make understanding easier, I still use the term ‘inputting image’ into the HTML page.

For example, the following code is used to display the logo picture of the world using the absolute address writing:

index.html

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Learn Image Element</title>
</head>
<body>
  <img src=
  "https://laikie.site/wp-content/uploads/2019/09/laikiesite.png"> 
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\1.png
Image Related Element

In order for the picture above to appear, an internet connection must be available, because the Laikie logo is on the laikie.site site.

To be able to use relative addresses, we must first provide the image you want to display. Please find an image on your computer and place it in the learn_html folder (where the index.html file is located).

For example, I will use a picture of the ‘San Siro Stadium’ obtained from Wikipedia.

The image is named San_Siro.jpg, so the <img> tag used is as follows:

<img src="San_Siro.jpg">

Using the index.html template, here is the HTML code for using the <img> tag to display the Laikie and San_Siro.jpg logo images:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
  <img src=
  "https://laikie.site/wp-content/uploads/2019/09/laikiesite.png"> 
  <br>
  <img src="San_Siro.jpg">
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\2.png
Image Related Element

Regarding image formats supported by HTML, it is entirely dependent on the web browser. The HTML standard from W3C does not explicitly state what image formats should be used. But in general, web browsers support images in JPG, GIF, PNG, BMP and ICO formats.

Be careful about writing src attributes. Often the image fails to appear because we mistyped the src attribute to “scr”.

Alt Attribute

The alt attribute (short for alternate text) functions to provide information about the image. The contents of this attribute are text messages that will be displayed in the following conditions:

  • Images cannot be displayed (for example due to internet network disruption).
  • The web browser does not support image formats.
  • The web browser is in the process of displaying images.
  • The web browser is set to not display images.
  • The user uses a special browser like the “screen reader” that will not display images.

Following is an example of using the alt attribute:

<img alt="image of San Siro Stadium, Italy" src="San_Siro.jpg">

If you run the code above, you don’t see any changes. In order to see the effect of the alt attribute, we have to make the ‘fail’ image appear. For example, I will change the image extension from San_Siro.jpg to San_Siro.jpgx, with the following results:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
  <img alt="image of San Siro Stadium, Italy" src="San_Siro.jpgx">
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\3.png
Image Related Element

The alt attribute is also very useful for SEO purposes. Search engines like Google can’t process images to the maximum if they don’t know “what’s being told” in the image.

If we do an image search using Google, one of the things that are assessed is the contents of the alt attribute. Therefore, use descriptive text that can explain the contents of the image in this attribute.

Although it is very useful, not all images must have an alt attribute. Images for decoration purposes such as icons or background images do not need to use the alt attribute.

Title Attribute

The title attribute is optional (may not be written), this attribute is used to display information when the mouse cursor is above the image (mouse over). This information appears in the form of a tooltip. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
  <img alt="image of San Siro Stadium, Italy" 
  title="Football game in Italy" src ="San_Siro.jpg">
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\4.png
Image Related Element

The alt and title attributes function similarly, but the two are different. The description in the alt attribute will appear when the image fails to appear, while the description in the title attribute will appear in the form of a tooltip and does not depend on whether the image appears or not.

If the image fails to appear, the caption text in the title attribute will still be displayed, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
  <img alt="image of San Siro Stadium, Italy" 
  title="Football game in Italy" src ="San_Siro.jpgx">
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\5.png
Image Related Element

Height and Width Attributes

The height and width attributes are used to adjust the size of the image. The height attribute is to set height, while the width attribute is to set the width of the image. The values of these two attributes are numbers in pixels and percent (%).

Both the height attribute and the width attribute can be used separately or together. If made separate, the web browser will ‘adjust’ the height or width of the image so that the image does not appear ‘broken’ (appear proportional).

For example, the San_Siro.jpg image has an original dimension of 250 × 97 pixels (250 pixels wide and 97 pixels high). If I use the width = “350” attribute, the web browser automatically adjusts the height of the image to 136 pixels. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
  <img alt="image of San Siro Stadium, Italy" src ="San_Siro.jpg" width="275">
  <img alt="image of San Siro Stadium, Italy" src ="San_Siro.jpg" width="350">
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\6.png
Image Related Element

Get to know the Pixel Unit

Pixels (often abbreviated as px), are the standard size for digital images. In theory, 1 pixel is equal to 1 smallest point of the monitor screen. 200x300px images will be displayed on a screen with a width of 200 dots and a width of 300 dots.

In practice, this pixel size will display variously. Modern smartphones already use a pixel size that is almost the same as a computer screen, even though the screen size is smaller. On this smartphone, images with a size of 200x300px may be displayed by ‘taking’ 600x900pixel from the smartphone screen.

The term pixel comes from the picture element.

If the <img> tag includes the width and height attributes, the web browser will ‘force’ the image to appear in that size:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
  <img alt="image of San Siro Stadium, Italy" 
  src ="San_Siro.jpg" width="450" height="200">
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\7.png
Image Related Element

As you can see, the image is a bit more ‘wide’ because it’s forced to appear in a new size.

Changing the width and height of an image with the width or height attribute will not change the file size. When displaying an image, the web browser actually downloads the image first, then adjusts the image size.

As a result, if you intend to display small images, consider resizing the original image rather than reducing it using the width or height attribute. This is done to save bandwidth usage and speed up the process of loading web pages.

In addition to setting the height and width of the image in pixels, we can also write the size in percent (%), like this:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" width="50%">
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\8.png
Image Related Element

Width width = “50%” means the size of the image will be set at 50% of the width of the parent tag. Because in this example the parent tag is the <body> tag, then the width of the image will be set at 50% of the width of the web browser window.

One of the interesting things when we use percent units, the image will follow the width size of the web browser window. Please try to minimize the window, and the image will also shrink. This trick is used to make images responsive, which are used in responsive web design.

As an alternative, we can use CSS to set the width and height of the image with the width and height properties. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" style="width:300px; height:200px;">
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" style="width:50%">
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\9.png
Image Related Element

In addition to adjusting the size of the image, the width and height attributes are also useful to avoid the ‘jump’ effect when loading web pages. This effect occurs when we access a site using a slow internet connection.

When the web page is displayed, the text will be processed first, then the images are displayed one by one. When the image reaches the web browser, the image will ‘push’ the text below it, so we see as if the text ‘jumps’ because it has to make room for the image that was just received.

By setting the image size with width and/or height attributes, the web browser can prepare ‘space’ for this image that has not yet been received.

Align Attribute

The <img> tag is an inline-level element, which will follow the flow of the text where this tag is located. By default, the image will appear with the text at the bottom of the image, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
 <p>
 <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" width="200">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
	porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
	purus lectus malesuada libero, sit amet commodo magna eros quis urna.
	Nunc viverra imperdiet enim.
</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\10.png
Image Related Element

To adjust the display position of the image, we can add the align attribute to the <img> tag. The values that can be used are bottom, left, middle, right and top.

Following is an example of using the align attribute in the <img> tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
	<p>
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" width="100" align="left">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
	porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
	purus lectus malesuada libero, sit amet commodo magna eros quis urna.
	Nunc viverra imperdiet enim.
	</p>
	<p>
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" width="100" align="right">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
	porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
	purus lectus malesuada libero, sit amet commodo magna eros quis urna.
	Nunc viverra imperdiet enim.
	</p>
	<p>
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" width="100" align="middle">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
	porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
	purus lectus malesuada libero, sit amet commodo magna eros quis urna.
	Nunc viverra imperdiet enim.
	</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\11.png
Image Related Element

However, before starting to use it, HTML5 states that the align attribute is deprecated. We are advised to use CSS via the float and verticalalign properties. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
	<p>
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" width="100" style="float: left">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
	porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
	purus lectus malesuada libero, sit amet commodo magna eros quis urna.
	Nunc viverra imperdiet enim.
	</p>
	<p>
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" width="100" style="float: right">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
	porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
	purus lectus malesuada libero, sit amet commodo magna eros quis urna.
	Nunc viverra imperdiet enim.
	</p>
	<p>
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" width="100" style="float: middle">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
	porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
	purus lectus malesuada libero, sit amet commodo magna eros quis urna.
	Nunc viverra imperdiet enim.
	</p>
</body>
</html>

The result is exactly the same as the previous code that uses the align attribute.

If you want a gap between the image and the text, you can add the margin attribute using CSS:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
	<p>
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" width="200" style="float: left; margin: 10px">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
	porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
	purus lectus malesuada libero, sit amet commodo magna eros quis urna.
	Nunc viverra imperdiet enim.
	</p>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\12.png
Image Related Element

Border Attribute

The common thing to do to enhance your image is to give a border/frame. For this, we can use the border attribute. The border attribute can be filled with numbers in pixels. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" border="5">
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\13.png
Image Related Element

Just like the align attribute, the border attribute has also been declared deprecated in HTML5. The same effect will be more appropriate if you use CSS. CSS provides various properties for creating borders. Here is one example

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
  <img alt="image of San Siro Stadium, Italy" 
  src="San_Siro.jpg" style="border:5px dotted blue">
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\14.png
Image Related Element

One of the things that you often encounter is images that also function as links. To get this result, we just need to file the <img> tag inside the <a> tag, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
	<a href="https://en.wikipedia.org/wiki/San_Siro">
	<img alt="image of San Siro Stadium, Italy" src="San_Siro.jpg">
	</a>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\15.png
Image Related Element

Now, if you hover the mouse cursor directly above the image, the cursor will change to a ‘hand’ sign that indicates the image can be clicked. When the image is clicked, the web browser will display a new page according to the href attribute of the <a> tag.

This technique is also used to create thumbnail images. That is a small image that when clicked will display a large version of the image. To make it, simply provide 2 versions of the image, and adjust the href attribute of the <a> tag towards the large size image. Here is an example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
	<a href="San_Siro_HD.jpg">
	<img alt="image of San Siro Stadium, Italy" src="San_Siro.jpg">
	</a>
</body>
</html>

Map Element, Area Element, and Usemap Attributes

Another attribute available in the <img> tag is usemap. This attribute is used to create an image map, which maps the parts of the image to be used as a link.

To be able to use this feature we need the help of <map> and <area> tags. Both of these tags function to define the ‘area’ that will be the link.

For example, I will use the Bundaran_HI.jpg image and make it an image map. In the picture, there are views of the Bundaran HI, Hotel Indonesia, and Busway. I will make these three areas clickable and go to the Wikipedia page that explains each location.

Here is an image of the area that will become an image map:

Image Related Element

You can see, I marked 3 areas, namely the Bundaran HI with a yellow circle, Hotel Indonesia with a red square, and busway with a green square. Here is the HTML code for creating the image map:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Image Element</title>
</head>
<body>
  <img alt="Image bundaran HI jakarta" src="Bundaran_HI.jpg" 
  usemap="#map" width="400" height="300" >
  <map name="map">
  <area 
    shape="rect" coords="250,175,400,300" 
    href="http://id.wikipedia.org/wiki/Transjakarta" 
    alt="Bus Transjakarta"
    title="Bus Transjakarta"
  >
  <area 
    shape="rect" coords="275,100,400,160" 
    href="http://id.wikipedia.org/wiki/Hotel_Indonesia" 
    alt="Hotel Indonesia"
    title="Hotel Indonesia"
  >
  <area 
    shape="circle" coords="200,150,50" 
    href="http://id.wikipedia.org/wiki/Monumen_Selamat_Datang" 
    alt="Bundaran HI"
    title="Bundaran HI"
  >
  </map>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\16.png
Image Related Element

On the 8th line I use the <img> tag as usual, but this time with the added attribute use map = “# map”. This attribute serves to ‘associate’ images from the <img> tag with ‘image maps’ that are in the <map> tag.

The <map> tag that comes after the <img> tag has the name = “map” attribute. The value of this attribute must match the value of the usemap attribute in the <img> tag. For example, if in the <img> tag I change our usemap = “# map_punya_ attribute”, then in the <map> tag there must also be the name = “map_punya_ku” attribute. Thus these two tags will be interconnected.

Next, in the <map> tag there is a <area> tag. The <area> tag is used to mark portions of an image. Because I will make 3 areas, I use 3 <area> tags.

On each <area> tag there are the shape, coords, href, and title attributes.

The shape attribute in the <area> tag is used to make the shape of the area. Values ​​that can be used are rect, circle, poly and default. This value is paired with the coords attribute which functions to determine the points of the area.

The shape = “rect” attribute will make the shape of the rectangular area, shape = “circle” to make a circle, shape = “poly” to form a polygon (an area with arbitrary shapes), and shape = “default” will make the entire drawing area become an area.

In HTML, the coordinates of the image are expressed in the form of x, y. Point 0.0 is on the top left of the image, and point 400,300 is on the lower right side (this is because I use images with dimensions of 400 pixels wide and 300 pixels high).

If using shape = “rect”, we must determine the initial coordinates and the final coordinates of the rectangle. In the example above, I used shape = “rect” to mark the location of the busway and Hotel Indonesia.

The coords attribute for shape = “rect” takes the form x.1, y.1, x.2, y.2, where x.1, y.1 denotes the initial coordinates, and x.2, y.2 indicates the final coordinates. In the first <area> tag I used coords = “250,175,400,300” to mark the green box where the busway is, while in the second <area> tag I used coords = “275,100,400,160” to create the Hotel Indonesia area.

In the third <area> tag, I use shape = “circle” to make a circle. This time the coords attribute will be x, y, r. The coordinates x, y is the center of the circle, while r is the radius of the circle. I used coords = “200,150.50” to mark the location of the Bundaran HI.

The shape = “poly” attribute uses coordinates with the shapes x.1, y.1, x.2, y.2, x.3, y.3, x.4, y.4, … etc. This attribute can be used to create areas with arbitrary shapes, as long as the last coordinate coincides with the initial coordinates so that the polygon area is ‘closed’.

The href and title attributes of each <area> tag are used as links and titles for the area.

If you run the above code, each marked area will be a link that will each lead to a separate page.

This image map feature is suitable for creating map images where visitors can directly interact with images.

One drawback of the image map that I use here is that HTML does not ‘mark’ the clickable portion of the image. The whole picture looks ‘normal’. It would be better if there is the little effect when the mouse is above the link area, for example changing the color of the image, or using the zoom effect. Results like this can be obtained with the help of JavaScript.

Figure Element and Figcaption Element

HTML5 brings 2 new semantic elements related to images, namely the <figure> and <figcaption> tags.

We will discuss semantic elements in the special chapter on HTML5 semantic elements.

The <figure> tag functions as a ‘container’ for one or more <img> tags. While the <figcaption> tag is used to make a caption of the image.

In the HTML5 specification, the <figure> tag can be used for images, illustrations, diagrams and other components related to the text being discussed, but not necessarily in one fixed location.

For example, if I have an article that discusses the city of Jakarta, pictures about the Bundaran HI, or TransJakarta buses are certainly still related to the text. However, the picture does not have to be in a certain position. Bundaran HI images can be placed at the beginning of the article, the middle, or the end of the article, and do not affect the function of the image.

Following is an example of using the <figure> tag:

<figure>
<img alt = "Jakarta Bundaran HI" src = "Bundaran_HI.jpg">
</figure>

From the results seen, the web browser will add a little ‘space’ from the edge of the <figure> tag (known as margin). This space can later be arranged using CSS.

The <figcaption> tag can be added to make a description of the image. This tag can be placed before or after <img>, like the following example:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Figure and Figcaption Element</title>
</head>
<body>
<figure>
  <figcaption>
    The atmosphere of the Jakarta Bundaran HI during Car Free Day
  </figcaption>
  <img alt="Bundaran HI Jakarta" src="Bundaran_HI.jpg" width="300">
</figure>
<figure>
  <img alt="Istiqlal Mosque" src="Istiqlal_Mosque_Monas.jpg" width="300">
  <figcaption>
    Istiqlal Mosque in Jakarta
  </figcaption>
</figure>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\17.png
Image Related Element

The HTML5 specification recommends only using 1 <figcaption> tag for each <figure> tag. But we can place some images inside the <figure> tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Figure and Figcaption Element</title>
</head>
<body>
<figure>
  <img alt="Bundaran HI Jakarta" src="Bundaran_HI.jpg">
  <img alt="Istiqlal Mosque" src="Istiqlal_Mosque_Monas.jpg">
  <img alt="TransJakarta Bus" src=" Bus_TransJakarta.jpg">
  <figcaption>
    A picture of Jakarta, taken from 
	<a href="http://en.wikipedia.org/wiki/Jakarta">wikipedia.org</a>
  </figcaption>
</figure>
</body>
</html>
D:\Website\Harus serius\Laikie Berita\HTML\part6\18.png
Image Related Element

In accordance with the definition, the <figure> tag not only functions as a ‘container’ tag <img>, this tag can also be filled with other content such as <canvas>, <svg>, even in the form of text such as a quote.

Some of the tags and attributes that we discuss in this chapter are used to display images in a web browser. For modern websites, it is almost impossible to create a website without images, at least the images are used as logos or as background images.

Following is an example of HTML code that uses various tags and attributes that we have learned in this chapter: 

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Figure and Figcaption Element</title>
  <style>
    figure{
      float:left;
      margin:10px;
    }
    img{
      border: solid 1px black;
      padding:6px;
    }
    figcaption{
      text-align:center;
    }
  </style>
</head>
<body>
<p>Jakarta, officially known as the Special Capital Region of Jakarta 
(Indonesian: Daerah Khusus Ibu Kota Jakarta), 
is the capital and largest city of Indonesia, 
and one of the most populous urban agglomerations in the world.</p>

<figure>
  <img alt="Bundaran HI Jakarta" src="Bundaran_HI.jpg">
  <img alt="Istiqlal Mosque" src="Istiqlal_Mosque_Monas.jpg">
  <img alt="TransJakarta Bus" src=" Bus_TransJakarta.jpg">
  <figcaption>
    A picture of Jakarta, taken from 
	<a href="http://en.wikipedia.org/wiki/Jakarta">wikipedia.org</a>
  </figcaption>
</figure>

<p>Located on the northwest coast of Java, 
Jakarta is the country's economic, cultural and political center, 
and with a population of 9,761,407 as of December 2012, 
it is the most populous city in Indonesia and in Southeast Asia. 
The official metropolitan area, known as Jabodetabek 
(a name formed by combining the initial syllables of Jakarta, Bogor, 
Depok, Tangerang, and Bekasi), is the second-largest in the world, 
yet the metropolis's suburbs still continue beyond it.</p>

<p>Established in the fourth century, the city became an important 
trading port for the Kingdom of Sunda. It was the de facto capital 
of the Dutch East Indies (known as Batavia at that time). 
Today, the city has continued as the capital of Indonesia since 
the country's independence was declared in 1945. 
The city is currently the seat of the ASEAN Secretariat.</p>
</body>
</html>

In the above code, I use a little CSS to format the image display. You only need to understand the structure of the HTML used. With a good HTML structure, web pages will be easily processed by web browsers, and also easy to style using CSS.

In this chapter, we have discussed various tags and attributes related to images. In the next chapter, we will discuss multimedia, which is how to display audio and video in HTML pages.

HTML Tutorial List

  1. Learn HTML For Beginner (Part 1 : Introduction HTML)
  2. Learn HTML For Beginner (Part 2 : Basic Structure of HTML)
  3. Learn HTML For Beginner (Part 3 : Head Element)
  4. Learn HTML For Beginner (Part 4 : Text Formatting Element)
  5. Learn HTML For Beginner (Part 5 : List Element)
  6. Learn HTML For Beginner (Part 6 : Image Related Element)
  7. Learn HTML For Beginner (Part 7 : Audio dan Video Element)
  8. Learn HTML For Beginner (Part 8 : Table Element)
  9. Learn HTML For Beginner (Part 9 : Form Element
  10. Learn HTML For Beginner (Part 10 : HTML5 Form Element)
  11. Learn HTML For Beginner (Part 11 : Embed, Object dan Iframe Element)
  12. Learn HTML For Beginner (Part 12 : HTML5 Canvas Element)
  13. Learn HTML For Beginner (Part 13 : Scalable Vector Graphics (SVG))
  14. Learn HTML For Beginner (Part 14 : HTML5 Semantic Tag (Layout))

What do you think?

Comments

Leave a Reply

2 Pings & Trackbacks

  1. Pingback:

  2. Pingback:

Leave a Reply

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

Loading…

0

Comments

0 comments

Learn HTML For Beginner (Part 5: List Element)

Learn HTML For Beginner (Part 7: Audio and Video Elements)