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 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.

Binder Button

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

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!"

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!"

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.
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!"

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>

Links - Example 1 (Text links)

We can use simple text links:

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

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)

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

Code (Ctrl C + Ctrl V)

Images - Example 1 (Calendar)

Code (Ctrl C + Ctrl V)

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.

Code (Ctrl C + Ctrl V)

Flash Cards

Code (Ctrl C + Ctrl V)

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

SoundCloud

English4real · Residential Schools (CLB 5-6)

Code (Ctrl C + Ctrl V)

Dictionary Widget

CUP free search box

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

Code (Ctrl C + Ctrl V)

Count Down - Example (Assessment Date)

You Next Speaking Assessment is in ...

Code (Ctrl C + Ctrl V)

<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

Code (Ctrl C + Ctrl V)

Tracking Forms and Binder

Name	Benchmarks
John	_L2 - _S2 - ₃5 - _W3
Boris	_L3 - _S2 - _R2 - _W3
Michael	_L3 - _S3 - _R3 - _W3

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.

Advanced English Vocabulary - One Minute Videos on YouTube

Proceed to the list of Advanced English Vocabulary.

Enhancing courses with HTML Blocks in Avenue

What is an 'HTML Block'?

What can we use HTML Block for?

A. Course management and administrative information

B. Course content

How to add an HTML Block?

How to configure HTML Block?

Binder Button

Text formatting - Example 1 (plain text)

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

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

Links - Example 1 (Text links)

Links - Example 2 (Button links)

Buttons - Different colours

Images - Example 1 (Calendar)

Images - Example 2 (Emoji)

😀

✅

✨

😊

🔥

😂

⭐

💪

👍

✔️

👉

🙏

⚠️

🤔

❌

💩

✍️

👂

👁

👩‍🎓

👵

👩

👩‍🏫

👨‍🏫

👨‍👨‍👧‍👦

💼

👩🏻‍💻

🙋🏻

🌻

🌦

📖

🎙️

💬

📧

📚

💯

YouTube - Students' Works

Flash Cards

SoundCloud

Dictionary Widget

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

Count Down - Example (Assessment Date)

Dayforce Reminder

Tracking Forms and Binder

Advanced English Vocabulary - One Minute Videos on YouTube

Уроки грамматики

HTML Block

Следить за обновлениями

Website search