how to add image in html from a folder images

How To Add Image In HTML From A Folder [+Example Codes]

In this post you will discover step by step guide on how to add image in html from a folder with example, video and the source code included for you to copy and use for free in your own html project any time anywhere.

 

How To Add Image In HTML From A Folder Answered Step by Step Guide

 

SECTION A: Text-Based Answer

STEP 1: Create a Folder on your computer named “images” (follow normal ways you do it on your Windows, Mac or Linux system)

how to add image in html from a folder images 01

 

STEP 2: Put the image you like to use in the folder created in step 1 above.

how to add image in html from a folder images 0 2

NOTE: If you don’t have image to use, then you can get a free image from royalty free images websites like Pexels and Pixabay (Just ensure whenever you using images in your development project, its either yours, you buy the licence or get it from royalty free websites mentioned previously to afford copyright infringement).

how to add image in html from a folder images 0 2b

 

STEP 3: Open your IDE – In my case am using VS Code (it free IDE to download)

how to add image in html from a folder images 0 3

 

STEP 4: Click on CTRL + N on Windows or Command + N on Mac to open a new file for your html code.

how to add image in html from a folder images 0 4

 

STEP 5: Click Save and ensure the file is saved as .html extension in same folder as where you have your images folder in step 1 above.

how to add image in html from a folder images 02

 

STEP 6: It time to code. Fill your normal HTML frame and put the following code in the body section (should be between it before the close of the body tag).

how to add image in html from a folder images 06

To make it easier for you as usual on dProgrammingUniversity, below under section C is the complete example source code on how to add image in HTML from a folder.

how to add image in html from a folder images 06b

 

STEP 7: Use the HTML syntax for image (as seen in source code in section C)

how to add image in html from a folder images 07

 

STEP 8: In the image element “src”, select the image to replace my sample image URL in the source code with the name of your image you saved inside the images folder we created in step 1 earlier.

how to add image in html from a folder images 08

 

STEP 9: Add “Alt” describing what the images is all about

how to add image in html from a folder images 09

 

STEP 10: Save your HTML code in VS Code. Then,

how to add image in html from a folder images 10

 

STEP 11: Click on “Go Live” at the bottom of the VS Code to auto launch your default browser to display the HTML page in your browser.

how to add image in html from a folder images 11

 

STEP 12: If you followed above instructions carefully, your HTML page should load up in your browser with the image from your images folder.

how to add image in html from a folder images 12

 

STEP 13: You can test the importance of the “alt” attribute by including “7” (or any other number or letter) at the end of the “src” URL to ensure its incorrect.

how to add image in html from a folder images 13

 

Clear the “7” (or any other number or letter) you added above away, save and you have your image back in html from a fold.

how to add image in html from a folder images 13b

 

STEP 14: Copy and paste the example source code used for this post below (Section C) and play with it to master how to get it done much easier and faster.

 

SECTION B: Video-Based Answer

Watch me answering your question “How To Add Image In HTML From A Folder” in a video step by step:

 

SECTION C: Source Code For Above Answer

Copy and use the example of How to add image in HTML from a folder below for free:

Source code Hidden Because You Are Not A Member – Don’t Worry, Membership is Free and the source code will be available FREE once you login.

REGISTER FREE   or   LOGIN  HERE

Similar Posts

Leave a Reply