Add Images on HTML is the section 8 of Beginner’s Guide to HTML.
To make your content more colorful and attractive, it is necessary to add one or more images in your content. It is one way of catching readers on to your content. So in this section we’ll try to add images on a HTML document. So here comes the tag who is going to support us to do that.
is an empty element. Which means it doesn’t come as a pair of opening and closing tags. Using attributes we can define what image need to display and how it need to display.
To display an image on a HTML page, you need to use the src attribute. It stands for “source”. The value of the src attribute is the URL of the image you want to display.[code language=”html”]
The URL points to the location where the image is stored. If you see, file name of my image is HTML-image_superman-logo-300×225.png and it is stored in the http://www.letsdnd.com domain and directory of wp-content/uploads/2014/08. So my URL is http://www.letsdnd.com/wp-content/uploads/2014/08/HTML-image_superman-logo-300×225.png
If you can remember the base tag we discussed in the previous section HTML Head, we can define our base tag as[code language=”html”]
This attribute comes in handy when the image cannot be displayed. Due to low bandwidth sometimes images are not displayed. Also it can be happened when the images are moved from the stored location and URL been not updated according to it. Even when the user read it from a screen reader, where the images are not displayed. This attribute means alternate text. It is a required attribute in the image tag. You can put a any text as the attribute value.[code language=”html”] Height and Width Attributes
Your image file have a specific width and height. But using height and width attributes you can change how it would display in the web browser whatever the height and width the file have. If you see my superman logo image size is 300*225. So here I’m going to change that. I’m setting width as 100 pixels and height as 75 pixels. See how the same image file become so smaller.[code language=”html”]
So let’s try to do some workout with images.
Let’s Tryout Images
How to put images within text paragraphs.[code language=”html”]
You need to learn little bit of CSS to make this perfect. As we cover CSS in another tutorial we keep this here.
Different image formats and sources[code language=”html”]
So here I put a image format called gif. It’s an animated image format. You can display any kind of image formats in the image tag. And also check the src attribute. It’s not our domain name. I had getting the image from a another source. But be careful when you do something like this on your web page. If the source has moved into another place, your image becomes a broken link. So always put your images on your server rather than referring other servers.
Now we’re going to do a interesting thing. For this we need other two elements.
See what happens. Following is a one image. Left part of it has Batman and right part of it has Superman. If you move your mouse over to the image, your cursor becomes a hand. Which means now the image becomes a link. But here is the trick. When you click at the batman it will take you to the Batman website and right part will take you to the Superman. Nice work! isn’t it?
Let’s look how it was done.[code language=”html”] In the image tag, we had a attribute called usemap. The value of it is the name of
element with a # character. We map this image into two areas of links. One area is for Batman and other is for Superman. Both the area shape is rectangle and it defines as a attribute of area tag. shape=”rect”. It can be a circle, polygon or the entire image shape. From the coords attribute we define the coordinates of the area shape. Other attributes, I guess you already know.
In this section we learned how to add images on your content to make the content more fabulous. We learned few tricks of mapping an image to several links. So in the next section we are going to learn how to present datasets nicely.
Present datasets with HTML Tables.