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 that an instructor creates with Moodle's robust HTML editor. Instructors can format text, add links, insert images and videos, and modify a page's HTML code.

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 Activities are listed above Resources. Scroll down to view all the Resources and select Page. A description will be displayed at right.
  5. Click Add. The Adding a new page screen will open.
  6. On the Adding a new page screen, in the Name field, enter a title for the page (required). The name you enter will display as the link to the page on your course page.
  7. In the Description field, enter a description (optional).
  8. To display the description on the course page, immediately below the link to the Page, check Display description on course page.
  9. The Page content box is where you add the content that will display on the page. Use the HTML editor toolbar to format the text (change font style, size, color, alignment, etc).
    Note: You can copy and paste, or drag and drop formatted text into the HTML editor window, however if you are copying content from Microsoft Word, to preserve formatting click the Paste-from-Word icon ( The paste-from-Word button looks like a clipboard with a big ) in the HTML editor toolbar.  The Paste from Word pop-up window will open. Paste or drag the content into the Paste from Word window and click Insert.
  10. Click Save and display to open the page you just created and ensure it displays as expected.
  11. To make adjustments to the page, return to your course page:
    • To adjust the settings or edit the page contents or formatting, click its Update icon ().
    • To rename the Page link on your course page, click its Edit title icon ( The ).
    • To move the Page link from the bottom of the Section, drag using its 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. You can also use the Insert image button in the HTML 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 HTML editor box in Moodle and release the image where you want it to appear on your Moodle page.
  3. To change the image properties (e.g., alignment, size, border, etc.), click the image, then click the Insert/edit image button (Insert/Edit picture button)  in the HTML editor toolbar. The Insert/edit image pop-up window will open showing a preview of your image.
    • In the Image description field, enter a description to make your label accessible to students who use screen reading software.
    • To align the image left or right within the page, click the Appearance tab and change the Alignment drop-down from --Not set--.
    • Under the Appearance tab you can also resize the image to particular dimensions (in pixels), or add white space (margin) or a border around an image.
  4. To preserve your changes, click Save and display, or Save and return to course.

Add an image using the Insert image button in the HTML editor toolbar.

  1. While editing a Page, click the Insert/edit image button  (Insert/Edit picture button)  in the HTML editor toolbar. The Insert/edit image pop-up window will open.
  2. In the Insert/edit image pop-up, to select an image from your computer, click Find or upload an image.... The File picker pop-up window will open. (.png, .jpg, and .gif are the most reliable image file formats.)
  3. In the File Picker pop-up window, click Upload a file. To select the image file from your computer, click Browse...  Once you select the file, the name will appear in the Attachment box.
  4. To upload the file to Moodle, click Upload. The File Picker pop-up window will close and you will see the image previewed in the Insert/edit image pop-up window. Type a description of the image in the Image description box and click Insert. The Insert/edit image pop-up window will close.
  5. (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.
  6. To change the image properties (e.g., alignment, size, border, etc.), click the image, then click the Insert/edit image button (Insert/Edit picture button)  in the HTML editor toolbar. The Insert/edit image pop-up window will open showing a preview of your image.
    • In the Image description field, enter a description to make your label accessible to students who use screen reading software.
    • To align the image left or right within the label, click the Appearance tab and change the Alignment drop-down from --Not set--.
    • To resize the image, click the Appearance tab and enter dimensions (in pixels). Check Constrain proportions to enter just a width and 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
  7. To preserve your changes, click Save and display, or Save and return to course.

Modify the HTML Source Code of a Page

  1. On the Edit/Update Settings screen for the Page, in the HTML 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 screen 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.