Weather Block
Margarita Berezyanskaya
Last Update a month ago
The weather is a common subject that all of us can discuss. To get quick data from a live weather service, it is a good idea to include a Weather block on an online course.
Creating an Embed Code for a Canadian Region
1. Go to the website, https://weather.gc.ca/business/index_e.html
2. Choose a Province/Territory in the HTML Code Creator menu.
3. Click on the Go button.

Note: The Locations menu appears.

4. Choose a location from the drop-down menu.
5. Click on the Display Code button.
Note: The HTML Code appears.
6. Click inside the HTML code textbox.
7. Select all of the text.
8. Copy the text.

Note: The code is ready to be pasted.
Creating a Weather Block
1. On your course, click on the Turn editing on button.

2. In the Navigation drawer, click on the Add a block link.
Note: It is at the bottom of the Navigation drawer.

3. In the pop-up menu that appears, click on the HTML option.

5. In the new HTML block, click on the Actions menu icon.

6. In the drop-down menu, choose the Configuring a (new HTML block) block option.
Note: The Configuring a (new HTML block) block screen appears.
7. Type an HTML block title.
8. In the Content editor, click on the Show/hide advanced buttons icon.

9. Click on the HTML icon.

Note: The editor changes from a normal word processor style to an HTML code editor.
10. Delete all of the code in the editor.

11. Paste the code from the HTML Weather Code (step 9, previous section) into the Content textbox.

12. Click on the Save changes button.
13. Click on the Turn editing off button.
14. The HTML block appears with a weather widget inside.
