Enhancing your courses with HTML Blocks in Avenue

What is an 'HTML Block'?

HTML Block

An HTML block is a dynamic and highly customisable block that allows developers and instructors the ability to add digital content on the sidebar of their course page. It is flexible and can incorporate a variety of functions in the content area. It allows you to format text, add images, text links, buttons, embed video, sounds, flashcards, files or Dictionary widgets, and other unique elements to a course or site page. The possibilities are perhaps limitless. What’s more, there is no limit to the number of HTML blocks that you can add to a course.

What can we use HTML Block for?

HTML Block

Avenue provides us with more than thirty standard blocks that offer quite a good range of different functions. So, why do we need an HTML block? …

HTML block is a utility that can help us fill some information gaps for our students and provide us with useful resources and quick links. It can serve us for our administrative purposes. Besides that, it may also be helpful to build up and enrich our course content on the whole.

A. Course management and administrative information
  • A calendar (with PBLA days, state holiday, etc.);
  • A teacher information block (teacher name, a photo, phone number, email address);
  • A Binder button (quick link to the learners' assessment page)
  • An attendance policy
  • Classroom Etiquette and Rules
B. Course content
  • Vocabulary list
  • Quick links to study resources
  • Flash cards
  • Dictionary widgets
  • Polls

How to add an HTML Block?

Here are several simple steps you should take to create an "HTML Block":

  • 1. Click on the "Turn editing on" button.
  • 2. Make sure the "Navigation drawer" is visible (otherwise, click on the Vertical ellipsis icon on the top-left corner of your page).
  • 3. Scroll down to the bottom of the "Navigation drawer" and click on the "Add a block" link.
  • 4. Click on "HTML block".

A new "HTML block" appears at the bottom of the right column of the course.

How to add an HTML Block? How to add an HTML Block?

How to configure HTML Block?

To configure your HTML Block you need to:

  • 1. Click on the "Actions menu" icon.
  • 2. Select "Configure (new HTML Block) block" in the drop-down menu.
  • 3. Give "Title" to the HTML block in the "Title HTML block".
  • 4. Click the “Show more buttons” button in the toolbar in the “Content” section.
  • 5. Select "HTML"

A new "HTML block" appears at the bottom of the right column of the course.

Configure to HTML Block Configure to HTML Block

Binder Button

This 'Binder Button' is designed to take students from their course page to their Binder page in Avenue.

binder

Code (Ctrl C + Ctrl V)

<form action="https://avenue.ca/binder/" target="_blank">
<button type="submit" style="display: inline-block; background-color:
#3366cc; padding: 10px; width: 200px; color: #ffffff; text-align: center;
border: 4px double #cccccc; border-radius: 5px; font-size: 14px; cursor:
pointer; margin: 2px; /* add this line */">Binder »</button>
</form>

Text formatting - Example 1 (plain text)

"Hello everyone, and welcome to our online study page here on Avenue.ca! My name is Max. I'm your language instructor throughout this course. I'm really happy to work with you. And I want you to know that I'm here to help you and support you in your study process. If you have any questions or need assistance, please, feel free to ask me. You can contact me on my Email: m.achkasov@swo.ymca.ca or my cell phone: 417 454 6056. I hope our work together will be both enjoyable and rewarding for all of us. Thank you for being here. Let's get started!"

text-01

Code (Ctrl C + Ctrl V)

<p>"Hello everyone, and welcome to our online study page here on Avenue.ca! My name is Max. I'm your language instructor throughout this course. I'm really happy to work with you. And I want you to know that I'm here to help you and support you in your study process. If you have any questions or need assistance, please, feel free to ask me. You can contact me on my Email: m.achkasov@swo.ymca.ca or my cell phone: 417 454 6056. I hope our work together will be both enjoyable and rewarding for all of us. Thank you for being here. Let's get started!"</p>

Download HTML Cheat-Sheet

Text formatting - Example 2 (text with links and some formatting)

"Hello everyone, and welcome to our online study page here on Avenue.ca! My name is Max. I'm your language instructor throughout this course. I'm really happy to work with you. And I want you to know that I'm here to help you and support you in your study process. If you have any questions or need assistance, please, feel free to ask me. You can contact me on my Email: m.achkasov@swo.ymca.ca or my cell phone: 417 454 6056. I hope our work together will be both enjoyable and rewarding for all of us. Thank you for being here. Let's get started!"

text-02

Code (Ctrl C + Ctrl V)

<p>
<font face="Comic sans MS" size="4">
"Hello everyone, and welcome to our online study page here on <a href="https://avenue.ca" target="_blank">Avenue.ca</a>! My name is Max. I'm your language instructor throughout this course. I'm really happy to work with you. And I want you to know that I'm here to help you and support you in your study process. If you have any questions or need assistance, please, feel free to ask me. You can contact me on my Email: <a href="mailto:m.achkasov@swo.ymca.ca" target="_blank">m.achkasov@swo.ymca.ca</a> or my cell phone: <a href="tel:417 454 6056">417 454 6056</a>. I hope our work together will be both enjoyable and rewarding for all of us. Thank you for being here. Let's get started!"
</font>
</p>

Some other Fonts: Arial (sans-serif), Verdana (sans-serif), Tahoma (sans-serif), Trebuchet MS (sans-serif), Times New Roman (serif), Georgia (serif), Garamond (serif), Courier New (monospace), Brush Script MT (cursive).

Text formatting - Example 3 (text with links and some formatting)

"Hello everyone, and welcome to our online study page here on Avenue.ca!
My name is Max. I'm your language instructor throughout this course. Img
I'm really happy to work with you. And I want you to know that I'm here to help you and support you in your study process. If you have any questions or need assistance, please, feel free to ask me. You can contact me on my Email: m.achkasov@swo.ymca.ca or my cell phone: 417 454 6056.
I hope our work together will be both enjoyable and rewarding for all of us.
Thank you for being here.
Let's get started!"

text-03

Code (Ctrl C + Ctrl V)

<p><font face="Comic sans MS" size="4">"Hello everyone, and welcome to our online study page here on <a href="https://avenue.ca" target="_blank">Avenue.ca</a>! <br>
My name is Max. I'm your language instructor throughout this course. <img src = "img/avatar.jpg" alt="Img" width = "150" height = "150" border="3" align="right"/><br>
I'm really <b>happy to work with you</b>. And I want you to know that I'm here to help you and support you in your study process. If you have any questions or need assistance, please, <u>feel free to ask me</u>. You can contact me on my Email: <a href="mailto:m.achkasov@swo.ymca.ca" target="_blank">m.achkasov@swo.ymca.ca</a> or my cell phone: <a href="tel:417 454 6056">417 454 6056</a>. <br>
I hope our work together will be both <i>enjoyable</i> and <i>rewarding</i> for all of us.<br>
Thank you for being here. <br>
Let's get started!"</font></p>

We can use simple text links:

Quick-and-easy-english.com
EnglishPracticeTest.net
EslBrains.com
OneStopEnglish.com
EsleSchool.com
Teach-This.com
WordWall.net

links-01

Code (Ctrl C + Ctrl V)

<p>
<a href="https://quick-and-easy-english.com/" target="_blank">Quick-and-easy-english.com</a> <br>
<a href="https://englishpracticetest.net/" target="_blank">EnglishPracticeTest.net</a> <br>
<a href="https://eslbrains.com/" target="_blank">EslBrains.com</a> <br>
<a href="https://www.onestopenglish.com/" target="_blank">OneStopEnglish.com</a> <br>
<a href="https://www.esleschool.com/" target="_blank">EsleSchool.com</a> <br>
<a href="https://www.teach-this.com/" target="_blank">Teach-This.com</a> <br>
<a href="https://wordwall.net/" target="_blank">WordWall.net</a>
</p>

Links - Example 2 (Button links)

links-02

Code (Ctrl C + Ctrl V)

<p><a href="https://dictionary.cambridge.org/dictionary/essential-american-english/"><button>Cambridge</button></a> </p>
<p><a href="https://www.merriam-webster.com/"><button>Merriam-Webster</button></a> </p>
<p><a href="https://www.collinsdictionary.com/"><button>Collins</button></a> </p>
<p><a href="https://www.ldoceonline.com/"><button>Longman</button></a> </p>
<p><a href="https://www.deepl.com/translator"><button>Deepl</button></a> </p>

Buttons - Different colours

button

Code (Ctrl C + Ctrl V)

<p>
<a href="#"><button style="background-color: #04AA6D; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;">LINK</button></a>
<a href="#"><button style="background-color: #008CBA; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;">LINK</button></a>
<a href="#"><button style="background-color: #f44336; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;">LINK</button></a>
<a href="#"><button style="background-color: #e7e7e7; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;">LINK</button></a>
<a href="#"><button style="background-color: #555555; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;">LINK</button></a>
</p>

Images - Example 1 (Calendar)

Calendar

images

Code (Ctrl C + Ctrl V)

<p>
<a href="https://clb12.com/asset/pdf/calendar.pdf" target="_blank">
<img src="https://english4real.com/img/calendar/01.png?cache=123456789" alt="Calendar" class="img-fluid">
</a>
</p>

Images - Example 2 (Emoji)

Simply 'Copy-Paste' the images (no code required).


😀

😊

🔥

😂

💪

👍

✔️

👉

🙏


⚠️

🤔

💩

✍️

👂

👁

👩‍🎓

👵

👩

👩‍🏫

👨‍🏫


👨‍👨‍👧‍👦

💼

👩🏻‍💻

🙋🏻

🌻

🌦

📖

🎙️

💬

📧

📚

💯

YouTube - Students' Works

The idea of creating a voice-over came to us while students were working on one of the listening tasks about Indigenous people of Canada. It was a relatively short video with beautiful photography and meaningful text. As a class, we decided to record a voice-over for the same video, using our own readings and different background music. Each student received their own part and practiced reading it, focusing on delivering the right emphasis and using correct pronunciation. I used a simple voice recorder, the Olympus VN-8600PC. Afterward, I cleaned the audio in Audacity and edited it in Movavi.

youtube

Code (Ctrl C + Ctrl V)

<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/YEOqkcDOMpM?si=Urj1-m5eGIwijVUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>
</div>

Flash Cards

flashcards

Code (Ctrl C + Ctrl V)

<script>
var total_images = 24;
var random_number = Math.floor((Math.random() * total_images));
var random_img = new Array();
random_img[0] = '<a href="https://english4real.com/fc/health-01.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-01.jpg"></a>';
random_img[1] = '<a href="https://english4real.com/fc/health-02.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-02.jpg"></a>';
random_img[2] = '<a href="https://english4real.com/fc/health-03.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-03.jpg"></a>';
random_img[3] = '<a href="https://english4real.com/fc/health-04.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-04.jpg"></a>';
random_img[4] = '<a href="https://english4real.com/fc/health-05.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-05.jpg"></a>';
random_img[5] = '<a href="https://english4real.com/fc/health-06.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-06.jpg"></a>';
random_img[6] = '<a href="https://english4real.com/fc/health-07.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-07.jpg"></a>';
random_img[7] = '<a href="https://english4real.com/fc/health-08.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-08.jpg"></a>';
random_img[8] = '<a href="https://english4real.com/fc/health-09.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-09.jpg"></a>';
random_img[9] = '<a href="https://english4real.com/fc/health-10.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-10.jpg"></a>';
random_img[10] = '<a href="https://english4real.com/fc/health-11.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-11.jpg"></a>';
random_img[11] = '<a href="https://english4real.com/fc/health-12.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-12.jpg"></a>';
random_img[12] = '<a href="https://english4real.com/fc/health-13.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-13.jpg"></a>';
random_img[13] = '<a href="https://english4real.com/fc/health-14.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-14.jpg"></a>';
random_img[14] = '<a href="https://english4real.com/fc/health-15.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-15.jpg"></a>';
random_img[15] = '<a href="https://english4real.com/fc/health-16.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-16.jpg"></a>';
random_img[16] = '<a href="https://english4real.com/fc/health-17.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-17.jpg"></a>';
random_img[17] = '<a href="https://english4real.com/fc/health-18.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-18.jpg"></a>';
random_img[18] = '<a href="https://english4real.com/fc/health-19.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-19.jpg"></a>';
random_img[19] = '<a href="https://english4real.com/fc/health-20.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-20.jpg"></a>';
random_img[20] = '<a href="https://english4real.com/fc/health-21.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-21.jpg"></a>';
random_img[21] = '<a href="https://english4real.com/fc/health-22.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-22.jpg"></a>';
random_img[22] = '<a href="https://english4real.com/fc/health-23.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-23.jpg"></a>';
random_img[23] = '<a href="https://english4real.com/fc/health-24.html"><img class="img-fluid" src="https://english4real.com/img/fc/health-24.jpg"></a>';

document.write(random_img[random_number]);
</script>

SoundCloud

soundcloud

Code (Ctrl C + Ctrl V)

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1754781732&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</iframe>
<div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
<a href="https://soundcloud.com/english4real" title="English4real" target="_blank" style="color: #cccccc; text-decoration: none;">English4real</a> ·
<a href="https://soundcloud.com/english4real/residential-schools-clb-5-6" title="Residential Schools (CLB 5-6)" target="_blank" style="color: #cccccc; text-decoration: none;">Residential Schools (CLB 5-6)</a>
</div>

Dictionary Widget

CUP free search box

dictionary

Code (Ctrl C + Ctrl V)

<form action='https://dictionary.cambridge.org/search/english/direct/' method='get' target='_blank' style='max-width: 350px;'>
<input type='hidden' name='utm_source' value='widget_searchbox_source'/>
<input type='hidden' name='utm_medium' value='widget_searchbox'/>
<input type='hidden' name='utm_campaign' value='widget_tracking'/>
<table style='font-family:Arial,Helvetica,sans-serif;font-size:10px;background:#1D2A57;border-collapse:collapse;border-spacing:0;width:100%;background-image:linear-gradient(to right,#0f193d,#2c2f62,#1a2753)'>
<caption style='display:none;'>CUP free search box</caption>
<tbody>
<tr>
<td colspan='2' style='padding:0;background:none;border:none;'>
<a href='https://dictionary.cambridge.org/' style='display:block;background:transparent url(https://dictionary.cambridge.org/external/images/freesearch/sbl.png?version=5.0.389) no-repeat 5px 6px;height:32px;'></a>
</td>
</tr>
<tr>
<td style='width: calc(100% - 24px);background:none;border:none;padding:0;font-size:10px;border-collapse:collapse;border-spacing:0;'>
<input style='margin:4px;padding:0 0 0 3px;display:block;font-family:Arial,Helvetica,sans-serif;font-size:10px;border:1px solid #ddd;border-radius:20px;box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,0.1);color:#444;width:calc(100% - 14px);' name='q' placeholder='Search English' type='search' title='search' dir='auto' role='textbox' autocomplete='off' aria-controls='search' aria-multiline='false' aria-expanded='false' aria-label='Search' aria-required='true' aria-invalid='false' />
</td>
<td style='width:20px;background:none;border:none;padding:0 4px 0 0;font-size:10px;border-collapse:collapse;border-spacing:0;'>
<button style='width:15px;height:15px;vertical-align:top;display:inline-block;border:none;border-radius:50%;text-align:center;text-transform:none;padding:0;background:#FEC400;cursor:pointer;overflow:hidden;' title='Search' type='submit'>
<img src='https://dictionary.cambridge.org/external/images/freesearch/search.png?version=5.0.389' style='vertical-align:-1px;border:none;height:auto;margin:0;padding:0;text-align:center;'/>
</button>
</td>
</tr>
</tbody>
</table>
</form>

Audio Player - Example: Dialogue Practice (2023-10-05; CLB 3-4)

Conv. 1

A What are you doing?
B I’m trying to open this packet.
A You shouldn’t use a knife! You’ll cut yourself!

Martin and Yol


Conv. 2

A Angela’s leaving work at the end of the month. She’s going to have a baby.
B We should get her a present.

Paulina and Ivonne

audio

Code (Ctrl C + Ctrl V)

<audio preload="none" style="width: 100%;" controls="controls">
<source src="https://clb12.com/asset/mp3/what-we-do-01-01.MP3" type="audio/mpeg">
<p>Here is a <a href="https://clb12.com/asset/mp3/what-we-do-01-01.MP3">link</a></p>
</audio>

Count Down - Example (Assessment Date)

You Next Speaking Assessment is in ...

countdown

Code (Ctrl C + Ctrl V)

<script src="https://cdn.logwork.com/widget/countdown.js"></script>

<a href="https://logwork.com/countdown-timer" class="countdown-timer" data-timezone="America/Toronto" data-date="2024-04-05 11:00">You Next Speaking Assessment is in ...</a>

Dayforce Reminder

reminder

Code (Ctrl C + Ctrl V)

<div class="embed-responsive embed-responsive-16by9">
<iframe width="475" height="250" src="https://vclock.com/embed/#time=08:58&title=Dayforce&theme=0&ampm=1&showdate=1&sound=classic" frameborder="0" allowfullscreen>
</iframe>
</div>

Tracking Forms and Binder

students

Code (Ctrl C + Ctrl V)

<table style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Benchmarks</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://avenue.ca/binder/" target="_blank"><span style="color: black;">John</span></a></td>
<td>
<a href="https://docs.google.com/spreadsheets/d/1GsRzgqBl3sz1epraZd05yu2Rhk-ODc-XrsCZFqgbiG8/edit#gid=1255547426&range=A41" target="_blank"><sub style="color: black;">L</sub><b>2</b> - <sub style="color: black;">S</sub><b style="color: red;">2</b> - <sub style="color: black;">3</sub><b style="color: green;">5</b> - <sub style="color: black;">W</sub><b style="color: orange;">3</b></a>
</td>
</tr>
<tr>
<td><a href="https://avenue.ca/binder/" target="_blank"><span style="color: black;">Boris</span></a></td>
<td>
<a href="https://docs.google.com/spreadsheets/d/1GsRzgqBl3sz1epraZd05yu2Rhk-ODc-XrsCZFqgbiG8/edit#gid=1255547426&range=A41" target="_blank"><sub style="color: black;">L</sub><b>3</b> - <sub style="color: black;">S</sub><b style="color: red;">2</b> - <sub style="color: black;">R</sub><b style="color: green;">2</b> - <sub style="color: black;">W</sub><b style="color: orange;">3</b></a>
</td>
</tr>
<tr>
<td><a href="https://avenue.ca/binder/" target="_blank"><span style="color: black;">Michael </span></a></td>
<td>
<a href="https://docs.google.com/spreadsheets/d/1GsRzgqBl3sz1epraZd05yu2Rhk-ODc-XrsCZFqgbiG8/edit#gid=1255547426&range=A61" target="_blank"><sub style="color: black;">L</sub><b>3</b> - <sub style="color: black;">S</sub><b style="color: red;">3</b> - <sub style="color: black;">R</sub><b style="color: green;">3</b> - <sub style="color: black;">W</sub><b style="color: orange;">3</b></a>
</td>
</tr>
</tbody>
</table>
Prepared by Maxim Achkasov.

Comments