Instead of a default home page, if you would like to set up your own Web page (html file) as your home page in Canvas, try the following. (If you don't know the basics of html coding, please go to the html5 tutorial first.)

First, click on the "Pages" tool (initially, it looks gray) to add a new front page. The "Pages" is a tool to add and edit your own page. If this is your first time to visit this link, the page says "No pages created. Add one!" Click on "Add one!"

When you try to add a "Page," it initially opens a blank page in Rich Content Editor like the one below. Enter any new title for this page like "Top Page" in the top blank field and enter information in the content field. Click on "Save" to save your content. When your page is ready to be shown to students, click on "Save & Publish" button instead. You are creating a html file with this editor. This is a great way to create various links within your courses (e.g., links to your virtual classroom guest URLs, links to other html files saved in Pages, links to files uploaded to the Files folder, etc.).

Only one of your pages can be set as a front page. After publishing the page to become a front page,

1. Click on the "Pages" link again.
2. Click on the gear icon of the page to be set as a front page.
3. Choose "Use as Front Page" as shown below.

Now you are ready to choose a home page for the course.

To choose your home page for the course, click on the "Home" link of your "Course" page. There is a button "Choose Home Page" on the right. Click on this to select the front page you set in Step 2 above.

Click on the second button ("Pages Front Page") and "Save" it. Your home page is now shown to students.

If you want to switch to a different front page, you need to make a different page as the front page first. Click on the [Change] link to do this.

FYI: If the second button cannot be clicked like below, you have not set your front page yet.

You can link items within any page including a front page/home page to any other pages you have created within Canvas. Please go to the following Canvas tutorial:

• How do I link to other Canvas pages in a course?

You can also link items within a page to files you have uploaded to Canvas. Files you upload to Canvas are stored in a location different from Pages. The home page of this workshop is created by linking the home page to files I have uploaded through the "Files" link.

The following are Canvas tutorials related to this topic.

1. What are Files in Canvas?
2. How do I create a folder in Files as an instructor?
3. How do I create a file link in a page in a course?

You can also link a Canvas page to external web pages outside of Canvas. While you are in Rich Content Editor mode within a Page:

1. Select the text (or image) to be linked to an external Web page.
2. Click on the "Link to URL" button as shown below.
3. When a popup window shows up, enter your external Web page URL.

To create a page that embeds a Web page using the HTML <iframe> tag, you need to go to the "HTML Editor" mode first within the Pages link.

Canvas allows you to embed only secure content (URL that starts with "https://..."). The external website to be embedded must also allow inline display. If a secure web page shows up as a blank page after entering the <iframe> code, that web page might not be allowing inline display.

After saving the page with an <iframe> code, Canvas will add the <p> tag automatically to your original HTML codes. The extra <p> tag will become visible when you reopen the same page later.

Sample #1 below shows a typical HTML code to embed an external Web page.

Sample #1: Embedding External Web Pages

As a starter, you can copy and paste the HTML code shown below into your page field. This iframe will embed a Youtube page in your page in Canvas.

The part you need to change in this example is in red above. The "src" tag contains the exact URL pointing to an external Web page. Youtube has an option to copy the video link (URL) you want so share. Optionally, you can adjust the size of the iframe by changing the numbers in blue.

Sample #2: Embedding Web Pages within Canvas > Files

You can also embed other Web pages you have uploaded to Canvas through the "Files" link, but this is more involved than linking to an external Web page.

When you upload a file to Canvas, two additional numbers are automatically assigned to locate your file in Canvas. You will need to find out what these numbers are first.

1. Within the "Files" link, locate your file you want to embed and click on it.
2. Canvas will open that file as shown below. Look at the exact URL of this file as shown below.
   

The first of these numbers (e.g., 1191) is a course ID of your Canvas course. This number stays the same for all of the files you have uploaded within the course. The second number (e.g., 95731) is a file ID for the file you have uploaded. Add the word "download" at the end of the file path.

Example:

The above code will be converted to the following automatically by Canvas. The part added by Canvas is in blue. You don't have to do anything to this part.

When you "Save & Publish" this page, your page will display an embedded web page from your file uploaded to the Files folder of you Canvas course. Note:

• Canvas does NOT provide editing option for uploaded files. Editing of HTML files must be done prior to uploading it to Canvas. (FYI: If you want to create/edit a Web page (HTML file) within Canvas, you need to use the Pages tool.)
• If you subsequently re-upload the file with the same name to Files, choose a "Replace" option. Canvas will keep the same file ID, so you don't need to change the code above.

More tutorial on this topic is found at Embedding an Uploaded HTML page in an iFrame.

Sample #3: Embedding PDFs within Canvas

You can also embed PDF files you have uploaded to Canvas through the "Files" link as shown below. Please note that the green part is different from the previous sample.