How To Add Images in HTML Page from URL

 

Introduction

In my previous post, you learnt how to add a clickable image to your html page.

We will learn how to add images linked to a source on your html page and it is interesting to create a page filled with images so read the whole post to understand how to do this.

Image from Online Free Websites

Browse the free website called pexels.com where you can copyright free pictures to download or use their source url to insert for this purpose. You don’t even need to sign up for an account to browse free images here on this website! After selecting a picture, right click on the image that you selected there and click on open in a new tab, then, just select the url until the jpg and copy the url source. For example, I found a beautiful image from pexels , it is an Italian hill picture and the full source url when opened in the new tab is 

   https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2” but I only highlighted this much from it : “https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg

Note that I only highlighted the url until where it stops at jpeg. 

Coding in HTML to view the picture on the page

Write the small heading h2 with the open and closed h2 tags, then below that write the img tag which is written as <img/> Note that this img tag is self closing and does not need another closed img tag unlike other tags. The self-closing img tag is written as <img /> 

Now, you need to insert an image inside this image tag and for this we copy the url from the image site that I explained how to do above, and then just insert this url inside the image tag as follows:

   <img src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg"  />

   <img src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg"  />

We write src that stands for source, that is image source and then src = and after the “=” or “equal to” sign , we paste the url link that we copied from the pexel website. This is for practice that we chose the pexels free site, you may choose any other site from which you can copy the image url. . Next, we write the alt attribute inside the img tag to provide alternative information about the image that we inserted. I will be writing a detailed post on alt attribute in another post in the coming weeks. 

After including the alt attribute, the img tag information here looks like this :

   <img src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg" alt="Italian hills" />

The full HTML Code for this exercise

<h1> Inserting Image in Your HTML Page</h1>
<h2>Italian hills</h2>
<img src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg" alt="Italian hills" />

 

Watch The Video Instruction

 

Conclusion

If you like to see the source code above in a code editor here is the link to my codepen source code so that you could view the html page that we created and using this as a guide line, you could create your own html page following the above code but with a different image. Looking forward to it!

In this part, we learnt how to add any image/s to our html page by adding a url link from images available online or it could be some image that we have uploaded to some website or blog . 

In the next post, we will learn, how to add images to our html page by inserting it from our computer file source, meaning, some images that we have saved to our computer files. Since it is slightly different, I decided to add the details in part 2 of this post in the coming week.

Happy coding in HTML. 

Want to read more HTML tutorials?

How To Add Clickable Image to Your HTML Page

How To Run HTM Program using Windows Terminal and Notepad