Page Module - Composing a Web Page

Margarita Berezyanskaya

Last Update 16 days ago

Course content can be developed directly in an online course using the Page module. Content created with the Page module is in HTML format using the standard text editor, which provides many formatting options and a lot of flexibility in page design. The Page module supports text, images, audio, video, tables and links to other web sites and local files. Instructors who use the HTML source editor option are able to embed content from the Internet by copy-pasting the HTML code that can be copied from other web sites, such as YouTube or Google maps.


Because the Page module produces content that is generated using HTML format, it can be accessed using all types of web-enabled devices including tablets and smartphones.

Using the Page Module to Support Blended Learning

There are many different ways for instructors to use the Page module to blend face-to-face training with the online environment. Pages can be used to present static information, but they can also have interactive capability when developed using the HTML source editor.


Instructors can use the Page module to create pages based on content from the face-to-face classroom. These might include lesson plans and objectives, summaries of in-class activities, posts of homework tasks, links to online resources that can supplement the class work, administrative information such as groupings and their tasks, and presentation schedules. Instructors can embed YouTube videos within their courses using the Page module. These could include videos posted by other instructors or content producers, or instructors can record their own videos using mobile devices and post them to their own YouTube channels.


Pages can also be useful for instructors taking a flipped approach to instruction. Using the flipped approach, instructors assign a Page to learners with a task to complete before the face-to-face class. During the in-class session, learners collaborate to engage with the concepts introduced in the pre-class task.

Exemplar

There is a Page resource in the Stage 2/3 Exemplar Course. It is called Sample Page - Multi-media Activity. It is in the Sample Stage 3 Activities and Resources section.

Adding a Page to a Course

1. At the top of the Course Homepage, click on the Edit mode toggle button in the upper right corner of the screen to activate the editing tools.



2. Hover your cursor over the dotted line between two activities. The Add an activity or resource icon (plus icon) appears.

3. Click on this icon.


Note: The Add an activity or resource pop-up appears.

4. Click on the Activity or resource link.

Note: The Add a new activity or resource pop-up appears.


5. Select the Page icon.



6. In the General section, type a brief, descriptive Name for the Page. This name will be used as the link to the Page.


7. Type a Description of the Page to be composed.



8. Compose the web page in the Page content text box in the Content section. The Text editor is the same editor found in other Moodle tools.



7. When the Page content is satisfactorily formatted and ready, click Save and display to view the Page.


 

Tips for Using the Text Editor

  • The editor offers many features. There are options to change the style and size of text. Text headings should be revised using the Paragraph drop-down menu to provide more consistent formatting across a course.

  • Text can be copy-pasted from MS Word into the Page content text box; however, text formatted in Word may not transfer properly into the Moodle interface. If the text is not able to be re-formatted successfully, it may be better to copy-paste the text from Word into a plain text editor like Windows Notepad and then copy-paste the source text into the Moodle Page editor.

  • For those with knowledge of HTML (HyperText Markup Language) clicking the HTML icon allows editing of the Page layout or pasting of code to embed content from other sites.

Embedding a Google Map into Page Content Using HTML

These instructions explain how to embed a Google map into a Page. The same process can be applied to embed other websites into the Page.


First, follow the instructions below to find the HTML code for a Google map.


1. Type the desired location into the Google search engine.


2. Click the Maps tab.



3. Ensure that the map to be embedded appears in the current map display. If there are multiple locations with the same name, choose the one that you searched for.


4. Click the Share icon.



5. Click on Embed a map.



6. Click the drop-down menu beside the embed code to change the size or to choose a custom size in the window that appears.



Note: The size of the preview map changes as different options are selected. The embed code also updates.


7. Click on the COPY HTML link.

Note:  The embed code is now in the computer clipboard.

8. Back on your Avenue course, in the Page content text box in the Content section, click in the View menu button.  



9. In the drop-down menu, choose Source code.



10. Paste the embed code from your Google Map into the Source code pop-up. 
Note:  The code does not word-wrap.

11. Click on the Save button and the map is displayed in the Page content text editing box.



12. Click Save and display to view the Page.

Video Resources

Resources