{"id":15401,"date":"2020-11-12T13:13:25","date_gmt":"2020-11-12T13:13:25","guid":{"rendered":"http:\/\/blog.citl.mun.ca\/technologyresources\/?page_id=15401"},"modified":"2025-11-06T16:22:47","modified_gmt":"2025-11-06T19:52:47","slug":"add-image-html-page","status":"publish","type":"page","link":"https:\/\/blog.citl.mun.ca\/technologyresources\/add-image-html-page\/","title":{"rendered":"Adding an Image to an HTML Page"},"content":{"rendered":"\n<p><div class='content-column one_third'><div id=\"bellows-main-htmleditor\" class=\"bellows bellows-nojs bellows-main bellows-source-menu bellows-align-left bellows-skin-vanilla bellows-type- bellows-expand-current\"><ul id=\"menu-html-editor\" class=\"bellows-nav\" data-bellows-config=\"main\"><li id=\"menu-item-26053\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-home bellows-menu-item-has-children bellows-menu-item-26053 bellows-item-level-0\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Home<\/span><button class=\"bellows-subtoggle\" aria-label=\"Toggle Submenu\"><i class=\"bellows-subtoggle-icon-expand fa fa-chevron-down\"><\/i><i class=\"bellows-subtoggle-icon-collapse fa fa-chevron-up\"><\/i><\/button><\/a>\n<ul class=\"bellows-submenu\">\n\t<li id=\"menu-item-26057\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-has-children bellows-menu-item-26057 bellows-item-level-1\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/brightspace-guides\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Brightspace Guides<\/span><button class=\"bellows-subtoggle\" aria-label=\"Toggle Submenu\"><i class=\"bellows-subtoggle-icon-expand fa fa-chevron-down\"><\/i><i class=\"bellows-subtoggle-icon-collapse fa fa-chevron-up\"><\/i><\/button><\/a>\n\t<ul class=\"bellows-submenu\">\n\t\t<li id=\"menu-item-26069\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-has-children bellows-menu-item-26069 bellows-item-level-2\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/brightspace-guides\/content\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Course Content<\/span><button class=\"bellows-subtoggle\" aria-label=\"Toggle Submenu\"><i class=\"bellows-subtoggle-icon-expand fa fa-chevron-down\"><\/i><i class=\"bellows-subtoggle-icon-collapse fa fa-chevron-up\"><\/i><\/button><\/a>\n\t\t<ul class=\"bellows-submenu\">\n\t\t\t<li id=\"menu-item-26029\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-has-children bellows-menu-item-26029 bellows-item-level-3\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/brightspace-guides\/content\/using-the-html-editor\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Brightspace (HTML) Editor<\/span><button class=\"bellows-subtoggle\" aria-label=\"Toggle Submenu\"><i class=\"bellows-subtoggle-icon-expand fa fa-chevron-down\"><\/i><i class=\"bellows-subtoggle-icon-collapse fa fa-chevron-up\"><\/i><\/button><\/a>\n\t\t\t<ul class=\"bellows-submenu\">\n\t\t\t\t<li id=\"menu-item-26037\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-26037 bellows-item-level-4\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/set-up-kit-create-edit-html-page\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Creating a New Page<\/span><\/a><\/li>\n\t\t\t\t<li id=\"menu-item-26031\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-26031 bellows-item-level-4\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/access-html-editor-within-a-page\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Accessing the Editor from an Existing Page<\/span><\/a><\/li>\n\t\t\t\t<li id=\"menu-item-26041\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-26041 bellows-item-level-4\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/create-headings-html-page\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Creating Headings<\/span><\/a><\/li>\n\t\t\t\t<li id=\"menu-item-26035\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-26035 bellows-item-level-4\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/create-in-hyperlink-html-page\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Creating Hyperlinks<\/span><\/a><\/li>\n\t\t\t\t<li id=\"menu-item-26045\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-26045 bellows-item-level-4\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/link-pdf-or-ppt-from-html-page\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Linking to PDF or PPT Files<\/span><\/a><\/li>\n\t\t\t\t<li id=\"menu-item-26033\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-26033 bellows-item-level-4\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/add-image-html-page\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Adding Images<\/span><\/a><\/li>\n\t\t\t\t<li id=\"menu-item-26039\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-26039 bellows-item-level-4\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/create-table-in-html-page\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Creating Tables<\/span><\/a><\/li>\n\t\t\t\t<li id=\"menu-item-26043\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-26043 bellows-item-level-4\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/embed-video-in-html-page\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Embedding Videos<\/span><\/a><\/li>\n\t\t\t\t<li id=\"menu-item-26051\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-26051 bellows-item-level-4\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/brightspace-guides\/communication\/brightspace-video-note\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Video Note<\/span><\/a><\/li>\n\t\t\t\t<li id=\"menu-item-26047\" class=\"bellows-menu-item bellows-menu-item-type-post_type bellows-menu-item-object-page bellows-menu-item-26047 bellows-item-level-4\"><a  href=\"https:\/\/blog.citl.mun.ca\/technologyresources\/brightspace-guides\/content\/357-2\/\" class=\"bellows-target\"><span class=\"bellows-target-title bellows-target-text\">Brightspace Editor FAQs<\/span><\/a><\/li>\n\t\t\t<\/ul>\n<\/li>\n\t\t<\/ul>\n<\/li>\n\t<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul><\/div><\/div><div class='content-column two_third last_column'><h1 class=\"wp-block-heading\">Adding an Image to an HTML Page<\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li>While editing an HTML page, place your cursor in the area of the page where you would like to insert the image. Using the Brightspace editor, click on <strong>Insert Image<\/strong>.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"439\" height=\"70\" src=\"https:\/\/blog.citl.mun.ca\/technologyresources\/files\/2021\/10\/html-insert-image.png\" alt=\"Shows a portion of the Brightspace editor with Insert image icon highlighted.\" class=\"wp-image-22323\" srcset=\"https:\/\/blog.citl.mun.ca\/technologyresources\/files\/2021\/10\/html-insert-image.png 439w, https:\/\/blog.citl.mun.ca\/technologyresources\/files\/2021\/10\/html-insert-image-300x48.png 300w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/><figcaption class=\"wp-element-caption\">Insert image<\/figcaption><\/figure>\n<\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>From the Add a File window, click <strong>My Computer<\/strong> to access an image that is stored on your computer (Alternatively, you can click <strong>Course Offering Files<\/strong> to access a file that is already stored in the course offering files area.)<\/li>\n\n\n\n<li>Click <strong>Upload.<\/strong> Locate and select the image you wish to upload. Click <strong>Open<\/strong>. Clicking <strong>Choose Destination<\/strong> will enable you to change the folder where the file will be stored in your course offering files. Click <strong>Add<\/strong>.<\/li>\n\n\n\n<li>You will be prompted to provide alternative text for the image. Alternative text is important for students who may be accessing the course through the use of assistive technologies, such as screen readers. Please try to be as descriptive as possible. When done, click <strong>OK<\/strong>.<\/li>\n\n\n\n<li>Once the image is inserted in the page, clicking on the image will display a pop up menu that will enable you to make minor modifications, such as resize or crop.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"119\" src=\"https:\/\/blog.citl.mun.ca\/technologyresources\/files\/2021\/10\/image-edit-menu.png\" alt=\"Screen shot of image popup menu\" class=\"wp-image-22331\" srcset=\"https:\/\/blog.citl.mun.ca\/technologyresources\/files\/2021\/10\/image-edit-menu.png 424w, https:\/\/blog.citl.mun.ca\/technologyresources\/files\/2021\/10\/image-edit-menu-300x84.png 300w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><figcaption class=\"wp-element-caption\">Popup edit menu<\/figcaption><\/figure>\n<\/div>\n\n\n<ol start=\"6\" class=\"wp-block-list\">\n<li>Be sure to save your changes when finished by clicking <strong>Save <\/strong>or<strong> Save and Close<\/strong> at the bottom of the HTML editing window.<\/li>\n<\/ol><\/div><div class='clear_column'><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":55,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[121],"class_list":["post-15401","page","type-page","status-publish","tag-set-up-kit"],"featured_image_src":null,"_links":{"self":[{"href":"https:\/\/blog.citl.mun.ca\/technologyresources\/wp-json\/wp\/v2\/pages\/15401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.citl.mun.ca\/technologyresources\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.citl.mun.ca\/technologyresources\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.citl.mun.ca\/technologyresources\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.citl.mun.ca\/technologyresources\/wp-json\/wp\/v2\/comments?post=15401"}],"version-history":[{"count":12,"href":"https:\/\/blog.citl.mun.ca\/technologyresources\/wp-json\/wp\/v2\/pages\/15401\/revisions"}],"predecessor-version":[{"id":36205,"href":"https:\/\/blog.citl.mun.ca\/technologyresources\/wp-json\/wp\/v2\/pages\/15401\/revisions\/36205"}],"wp:attachment":[{"href":"https:\/\/blog.citl.mun.ca\/technologyresources\/wp-json\/wp\/v2\/media?parent=15401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.citl.mun.ca\/technologyresources\/wp-json\/wp\/v2\/categories?post=15401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.citl.mun.ca\/technologyresources\/wp-json\/wp\/v2\/tags?post=15401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}