img – use to advise that an image is to be rendered on the page
src – contains the URL of the frame to which we are linking in the other webpage, or could point direct to a folder in on your computer or a cloud location.
alt – use to describe an image
width – specifies the width of the iframe in pixels. The larger the pixel figure the more of the screen it takes up, the lower the figure the less of the screen it takes up. You can change this figure to make your map fit to the area of your requirements.
height – specifies the height of the iframe in pixels. The larger the pixel figure the more of the screen it takes up, the lower the figure the less of the screen it takes up. You can change this figure to make your map fit to the area of your requirements.
style=”border:1px solid black;max-width:100%” – the figure of ‘1’ represents the width in pixels of the border of the image frame, ‘solid’ gives a solid border and ‘black’ refers to the colour of the border. These attributes can all be changed, eg you may want a border of 2 pixels, dotted, and Silver.
max-width 100% – useful 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. Using max-width means the map does not extend beyond the size of the screen.
To add an image to a web page is easy. If you would like instructions on how to do this using a Wikimedia Commons image then please click here.
If it helps, I find the information on iframes, colours and borders from w3schools to be useful.