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.