Skip navigation

Add an HTML Page to a Moodle Course

The Page resource allows students to see a single, scrollable Web page within a Moodle course. Instructors can format text, add links, insert images and videos, and modify a page's HTML code with Moodle's robust text editor.

Add a Page

  1. On your course page, click Turn editing on (top right). Editing icons and links will appear.
  2. Locate the Topic or Weekly Section where you will add the page. (If you are using the Collapsed topics format, open the Section.)
  3. At the bottom-right of the Section, click + Add an activity or resource. The Activity chooser will open.
  4. In the Activity chooser, scroll down to the Resources heading and select Page. Then click Add. The Adding a new Page page will open.
  5. In the Name field, enter a title for the page (required). The name you enter will display as a link on your course page.
  6. In the Description text box, enter a description (optional).
    Note: To display the description on the course page, check Display description on course page.
  7. In the Page content box, add the content that will display on the page (required.) Use the text editor toolbar to format the text (change font style, size, color, alignment, etc).
    Note: If you are copying and pasting content from Microsoft Word, click the Paste-from-Word icon (The paste-from-Word button looks like a clipboard with a big ) in the text editor toolbar to preserve formatting. The Paste from Word pop-up window will open. Paste or drag the content into the Paste from Word window and click Insert.
  8. Click Save and display to open the page you just created and ensure it displays as expected.
  9. To make adjustments to the page, return to your course page:
    • To adjust the settings or edit the page contents or formatting, click the Update icon (Moodle update icon).
    • To rename the Page link on your course page, click its Edit title icon (Moodle edit icon).
    • To move the Page link from the bottom of the Section, drag using its Move icon (Moodle move icon).  (For details, see Reorder Sections or Items in your Moodle Course.)

Add an Image to a Page

The easiest way to add an image to a page is to drag-and-drop the image file from your computer. This option is only available in Firefox. You can also use the Insert image button in the text editor toolbar.

Add an image using drag-and-drop.

  1. While editing a Page, arrange your computer desktop windows so that you can view both your browser window and the files on your computer (e.g., in an open folder or on your desktop).
  2. Drag an image file (.png, .jpg, and .gif are the most reliable image file formats) from your computer over the text editor box in Moodle and release the image where you want it to appear on your Moodle page.
  3. To change the image properties (alignment, size, border, etc.), click the image, then click Insert/edit image (Insert/Edit picture button)  in the text editor toolbar. The Insert/edit image pop-up window will open and show a preview of your image.
    • In the Image description field, enter a description to make your image accessible to students who use page reading software.
    • To align the image left or right within the page, click the Appearance tab and use the Alignment drop-down menu.
    • Under the Appearance tab you can also resize the image to particular dimensions (in pixels), or add white space (margins) or a border around an image.  Note: The image can also be resized in the Page content area by clicking the image and resizing it with the handles found around the image.
  4. To apply your changes to the image, click Update.
  5. Click Save and display to view your page.

Add an image using Insert/edit image in the text editor toolbar.

  1. While editing a Page, click Insert/edit image  (Insert/Edit picture button)  in the text editor toolbar. The Insert/edit image pop-up window will open.
  2. To select an image from your computer, click Find or upload an image.... The File picker pop-up window will open.
  3. In the File picker pop-up window, click Upload a file (top left). To select the image file from your computer, click Browse...  Once you select the file, the name will appear in the Attachment box.
    Note: .png, .jpg, and .gif are the most reliable image file formats.
  4. To upload the file to Moodle, click Upload this file. The File picker pop-up window will close and you will see the image previewed in the Insert/edit image pop-up window.
  5. Type a description of the image in the Image description box and click Insert. The Insert/edit image pop-up window will close.
  6. (Optional) To use an image from another web site, rather than uploading an image file, copy and paste the URL of the image to the Image URL box and type a description in the Image description box. Click Insert. The pop-up window will close.
  7. To change the image properties (alignment, size, border, etc.), click the image, then click Insert/edit image (Insert/Edit picture button)  in the text editor toolbar. The Insert/edit image pop-up window will open and show a preview of your image.
    • In the Image description field, enter a description to make your Page accessible to students who use page reading software.
    • To align the image left or right within the label, click the Appearance tab and use the Alignment drop-down menu.
    • To resize the image, click the Appearance tab and enter dimensions (in pixels). Check Constrain proportions to enter just a width or height and have the editor preserve the proportions of the image.
    • To add white space (margins) or a border around an image, under the Appearance tab, enter values (in pixels) for Vertical space, Horizontal space or Border.  The image can also be resized in the Page content area by clicking the image and resizing with the handles found around the image. 
  8. To add the image, click Insert.
  9. Click Save and display to view your page.

Modify the HTML Source Code of a Page

  1. On the Edit/Update Settings page for the Page, in the text editor toolbar, click the Edit HTML Source icon (Edit HTML source)  The HTML Source Editor pop-up window will open.
  2. Make changes to the HTML source code in the text box, then click Update. The HTML Source Editor pop-up window will close and the Edit page page will update to reflect your changes.
  3. To preserve your changes, click Save and display, or Save and return to course.

Note: You can use this method to paste code copied from a service such as You Tube to embed a video onto a Moodle page. For details, see Embed Video or Audio on a Moodle Page.