Capítulo 18 - Modelos de Rótulos HTML para o Moodle

O Moodle permite utilizar rótulos com HTML para organizar visualmente os conteúdos da disciplina. Com pequenas estruturas HTML é possível criar elementos visuais que ajudam os estudantes a identificar rapidamente atividades, materiais de estudo, videoaulas, fóruns e avaliações.

A seguir são apresentados alguns exemplos de rótulos que podem ser utilizados nas disciplinas. Em cada exemplo, primeiro é apresentado o resultado visual e logo abaixo o código HTML que pode ser copiado para utilização no Moodle.

Exemplo 1 — Rótulo para Podcast

<div style="font-family:'Segoe UI', Arial, Helvetica, sans-serif; max-width:520px; margin:10px 0;">
<div style="
background:#f6f4ff;
border-left:4px solid #7048e8;
padding:6px 14px;
border-radius:999px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
font-size:0.9em;
">
<strong style="color:#7048e8;">🎧 Podcast da unidade</strong> — o episódio está logo abaixo
</div>
</div>

Exemplo 2 — Rótulo para Fórum

<div style="font-family:'Segoe UI', Arial, Helvetica, sans-serif; max-width:520px; margin:10px 0;">
<div style="
background:#f9f9f9;
border-left:4px solid #495057;
padding:6px 14px;
border-radius:999px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
font-size:0.9em;
">
<strong style="color:#495057;">💬 Fórum de dúvidas</strong> — o fórum está logo abaixo
</div>
</div>

Exemplo 3 — Rótulo para Avaliação

<div style="font-family:'Segoe UI', Arial, Helvetica, sans-serif; max-width:520px; margin:10px 0;">
<div style="
background:#f8f7ff;
border-left:4px solid #5f3dc4;
padding:6px 14px;
border-radius:999px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
font-size:0.9em;
">
<strong style="color:#5f3dc4;">🧪 Avaliação</strong> — a avaliação está logo abaixo
</div>
</div>

Exemplo 4 — Rótulo para Videoaulas

<div style="font-family:'Segoe UI', Arial, Helvetica, sans-serif; max-width:520px; margin:10px 0;">
<div style="
background:#f3f8ff;
border-left:4px solid #1c7ed6;
padding:6px 14px;
border-radius:999px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
font-size:0.9em;
">
<strong style="color:#1c7ed6;">🎥 Videoaulas</strong> — os vídeos estão logo abaixo
</div>
</div>

Boas práticas de utilização