HTML Block
Margarita Berezyanskaya
Last Update há um mês
The power and versatility of the HTML block is enabled when HTML code is entered into this block after clicking the Edit HTML source tool.
Entering HTML code is not as difficult as it seems. There are many web and social media sites that provide readily-available HTML codes which can be copy-pasted into HTML blocks to create widgets that will display, for example, a YouTube video, a dictionary, an X feed (formerly Twitter), a photo slide show, a clock, a Voki talking avatar with a custom message, etc. There are multiple possibilities using this feature.
Exemplar
Two examples of HTML blocks are found in the Stage 2/3 Exemplar course. The Courseware Help block was created using the HTML text editor tools. Specifically, it was developed using the Insert/edit image and the Insert/edit link tools. There is also an example of an embedded YouTube video. This was added by copying the video’s Embed code (available after clicking Share on the YouTube video page) and pasting it into the HTML block after clicking the Edit HTML source tool.
Adding an HTML Block to a Course
1. On your course, click the Turn editing on button.
2. At the bottom of the Navigation drawer, click on the Add a block link.
3. From the pop-up, click on the HTML option.
The new HTML block appears.
Configuring an HTML Block Using the Text Editor Tools
1. Click on the Actions menu icon in the new block.
2. Choose the Configure (new HTML block) block option.
The Configuring a (new HTML block) block page appears.
3. Type a title in the HTML block title text box. This step is optional.
4. Position the cursor by clicking in the Content text box.
5. Click the Insert/edit image button in the Text editor toolbar.
The Image properties window appears.
6. Click on the Browse repositories button.
The File picker window appears.
7. Click Upload a file in the list of options on the left side.
Note: This step may not be necessary if the File picker window was recently used to upload a file.
8. Click the Browse button.
9. Navigate to and select the file on your computer's hard drive. This step is similar to selecting a file to be attached to an email.
10. Click on the Open button.
After selecting the attachment, the name of the selected file appears next to the Browse button in the File picker window.
11. Click the Upload this file button.
The Image properties window is displayed. It includes a preview of the selected image. Enter a brief description of the image in the Describe this image for someone who cannot see it text box. Set the desired size. if the Auto size checkbox is checked, the image will retain its ratio based on changes to one side, choose the alignment.
12. Click the Save image button.
The image is inserted into the HTML block Content text box.
The following steps create a hyperlink from the image:
13. Click the image to select it. When you click on the image, it will turn blue to show it has been selected.
14. Click the Insert/edit link button in the Text editor toolbar.
The Create link window appears.
15. Enter the URL (or web address) that the link should display in the Enter a URL text box. Check the Open in new window checkbox. Alternatively, you can leave this box unchecked if you want it to open the link in the same window. The browser's back function or arrow must be used to return to the course page.
Note: Clicking links on the new web page may make returning to the course page challenging. It is recommended that links to external or other sites open in a new window, so learners can navigate back to the courseware more easily. It is also advised to be consistent when setting up hyperlinks.
16. Click on the Create link button.
Note: The same steps are followed when setting hyperlinks for text in an HTML block. Type some text in the Content area of the HTML block. Highlight the text desired to function as a hyperlink. Click the Insert/edit link button in the Text editor toolbar. Insert the URL in the Insert/edit link window.
Configuring an HTML Block Using the HTML Code from an External Website – YouTube
These instructions explain how to embed a YouTube video into an HTML block. Before following these steps, locate a video on YouTube and copy its embed code. Tips on obtaining the embed code for a YouTube video are explained first.
Locating and Copying HTML Code for a YouTube Video
1. Navigate to a video page on YouTube.
2. Click the Share link located below the video.
3. A set of sharing icons appear, click on the embed icon.
4. The Embed Video code screen appears, click on the COPY link.
This custom embed code is ready to be pasted into an HTML block.
Embedding HTML from YouTube Video in the HTML Block
1. Click on the Actions menu icon in the new HTML block.
2. Choose the Configure (new HTML) block option.
3. Type a title in the HTML block title text box.
4. Type directions for students in the Content text box.
5. Click the Show/hide advanced buttons button in the Text editor toolbar.
6. More editing icons (features) appear, click on the Edit HTML source icon.
The text editing window becomes an HTML source editor window. Once the embed code from YouTube has been copied, right-click and select paste OR use the keyboard shortcut, Ctrl+V (Windows) or Cmd+V (Mac) to insert the code into the HTML source editor. You can use YouTube's custom size embed tool for different video sizes, or you can adjust the size in the code if you prefer.
7. Click on the Edit HTML source icon again.
8. The video is displayed in the Content text box on the Configuring a (new HTML block) block page.
9. Click the Save changes button.
The video is embedded on the course page. Learners can play the video using the video controls, in full screen mode or on the YouTube page itself.
Note: It is advised not to embed numerous videos on the same page, since pages with multiple videos will load slowly.
Video Resources
Resources