You want to insert an image from WikiCommons onto a web page, it’s easy. All you need to do is copy and paste one line of code into the source html file. That’s it!
Insert an image
Open your existing html file or set up a new html file 
. For this example a new local file has been created and named ‘images.html’.
For the example below the image chosen comes from the website Wikimedia Commons. Please remember to check the license rights for the images you wish to use.
Here, the image to be inserted is of Glamis Castle in Scotland which can be found at https://commons.wikimedia.org/wiki/File:Glamis_Castle_02.jpg.
On the Wikimedia Commons page, click the option ‘Use this file on the web’
Copy the code from the section ‘Embed this file’.
Using this link not only creates the image for your webpage but also creates a link back to Wikimedia.
Paste the code it into your html file (‘images.html’). When posted in a code editor (here Notepad++) the code looks similar to the following:
If you would like to know what the different words in the code relate to then please click here.
Save the file – IMPORTANT.
View the image on the web page
Open the file in the browser and view the map on the webpage. You can do this from the browser itself or if using a code editor you may have the facility to run the file in the browser .
Additional
It is also helpful to give attribution to the image on the face of the web page (note that from the code above, attribution is already there but a user needs to hover over the image to see it).
To do this we are going to insert a line of text using the ‘figcaption’ attribute to attach a caption to the image.
In your html file, on a new line below the code for the image add:
<figcaption>Glamis Castle, Scotland: Image by Rev Stan/Wikimedia Commons</figcaption>
To keep both the picture and the caption linked together, put <figure> before the <a> tag and </figure> after </figcaption> to encapsulate the code relating to the image. Doing this means that if the image is moved in location on the screen, the caption moves with it.
Save your file (IMPORTANT), then view the page in your browser.
Well done! You did it!
Taking it further
You may want to further customise your image. For example, you can change the size of the image by changing the width attribute and/or adding a height attribute .
You may consider adding a border. The following code adds a solid black border of 1 pixel to the image:
style=”border:1px solid black;”
To ensure that the image displays on all screens (eg mobile, desktop etc), it is useful to add to your code ‘max-width 100%’ especially if you do not have a responsive web page, ie one that adjusts the size and shape of the elements on a page as the screen size changes.
To add the above changes to the images.html file, after width=”600″ add in height=”450″ style=”border:1px solid black;max-width 100%”, then save the file.
Once refreshed in your browser, your page should now look like the following:
If you want to learn more about working with images, you may find the following resources helpful:
https://www.w3schools.com/howto/howto_css_images_side_by_side.asp