{"id":634,"date":"2015-03-05T12:29:46","date_gmt":"2015-03-05T12:29:46","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/?p=634"},"modified":"2015-06-04T15:00:04","modified_gmt":"2015-06-04T15:00:04","slug":"html-images","status":"publish","type":"post","link":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/2015\/03\/05\/html-images\/","title":{"rendered":"HTML – Images"},"content":{"rendered":"

To add a picture to a HTML page we use the <img><\/strong> tag. This tag creates a holding space for the image to be included on the page. This tag does not need to be closed.<\/p>\n

The tag uses a number of attributes but two of them are required. \u00a0SRC<\/strong>\u00a0tells the browser the location and file name of the image file (its source<\/strong>). ALT<\/strong>\u00a0is the alternative text that is displayed if the picture fails to load.<\/p>\n

\"Homer<\/a><\/p>\n

So the HTML code to display the image above is<\/p>\n

<img src=”HScomp.jpg” alt=”Homer at computer”><\/p>\n

This assumes that the image is in the same folder as the HTML file.<\/p>\n

If the image is the wrong size then you can use the height and width attributes to scale the picture.<\/p>\n

<img src=”HScomp.jpg” alt=”Homer at computer” width=200><\/p>\n

Would make the image 200 pixels wide while keeping the aspect ratio correct by automatically scaling the height by the correct percentage.<\/p>\n","protected":false},"excerpt":{"rendered":"

To add a picture to a HTML page we use the <img> tag. This tag creates a holding space for the image to be included on the page. This tag does not need to be closed. The tag uses a number of attributes but two of them are required. \u00a0SRC\u00a0tells the browser the location and …<\/p>\n","protected":false},"author":32,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17008,17010,73747],"tags":[9201,21],"class_list":["post-634","post","type-post","status-publish","format-standard","hentry","category-graphics-media-types","category-information-systems-development","category-structures-and-links-web-based","tag-html","tag-images"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts\/634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/comments?post=634"}],"version-history":[{"count":4,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts\/634\/revisions"}],"predecessor-version":[{"id":642,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/posts\/634\/revisions\/642"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/media?parent=634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/categories?post=634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/nl\/ColtnessHS-ComputingScience\/wp-json\/wp\/v2\/tags?post=634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}