It is common to include images in html page. You may have seen that many websites use images in various ways such as to show thumbnail, icon, picture, screenshot etc.
Let’s see how to add images to our html page.
First, create a new html page using our html page template that we have already created. Let’s name it as ‘images.html’.
Before adding an image to our page, add the following html content. This is just for demo purpose. You can use any content from your any article for practicing.
Add the following paragraphs within a body tag.
<p>
This is the first paragraph.
</p>
<p>
This is the second paragraph.
</p>
Let’s now add an image after the first paragraph as follows.
<p>
This is the first paragraph.
</p>
<img src="~/images/picure1.jpg">
<p>
This is the second paragraph.
</p>
As you can notice to add an image we have to use ‘img’ html tag. This ‘img’ tag has an attribute where we have to specify the URL of the image.
If the image is within our application directory we have to use a relative path. If the image is from other website or location on another server then we have to use a path of that image.
To add an image or images to our application directory, create a new folder named ’images’ in our root directory. Then add an image from somewhere else. You can get an image stored on your hard disk or from another source for our demo purpose.
Note here that we have placed our images in ‘images’ folder. This is not necessary. We are doing this because it is a standard practice to store all site images in one location i. e. in one folder such as ‘images’ folder within application directory. You can store your images anywhere within the application directory.
In our example, we have ‘picture1.jpg’ file in the ‘images’ folder. So we have given its relative path to src attribute of ‘img’ html tag.
One other thing I want to mention here is that we can use an image of any format such as ‘jpg’ or ‘png’. But it is a best practice to use ‘jpeg’ image with an extension either .jpg or .jpeg when we need to publish our html website, because of its smaller size and enough quality to show an image in a web page.
As you notice with the above code, an image is displayed with its full width and height. What if the image size is large or we want to show in a specific part of the application with given width and height. Then we can use width or height attribute of ‘img’ tag as follows.
<img src="~/images/picure1.jpg" width="250px">
We have added the ‘width’ attribute to ‘img’ tag and assign a value of 250 pixels. We have not specified height attribute because it is not really necessary.
When we add either width or height attribute to ‘img’ tag, the other size attribute is automatically adjusted for the image to keep its width and height ratio from original image size.
With this change, we have now image size of our own choice.
Now our image is placed between our two paragraphs. We can have our image within any other element such paragraph. So we can put our image to the content of any of the paragraphs. We will see how to do it later.