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. Esses rótulos funcionam como marcadores visuais que ajudam os estudantes a identificar rapidamente o tipo de material disponível, como videoaulas, fóruns, atividades avaliativas, podcasts ou materiais de leitura.

Neste capítulo são apresentados alguns modelos de rótulos que podem ser utilizados nas disciplinas. Em cada exemplo é apresentado primeiro o resultado visual e logo abaixo o código HTML que pode ser copiado e utilizado diretamente no Moodle.

Exemplo 1 — Podcast da unidade

Resultado visual

Código HTML

<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 — Fórum de dúvidas

Resultado visual

Código HTML

<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;font-size:0.9em;">
<strong style="color:#495057;">💬 Fórum de dúvidas</strong> — o fórum está logo abaixo
</div>
</div>

Exemplo 3 — Avaliação

Resultado visual

Código HTML

<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;font-size:0.9em;">
<strong style="color:#5f3dc4;">🧪 Avaliação</strong> — a avaliação está logo abaixo
</div>
</div>

Exemplo 4 — Atividade de casa

Resultado visual

Código HTML

<div style="font-family:'Segoe UI', Arial, Helvetica, sans-serif; max-width:520px; margin:10px 0;">
<div style="background:#fff6f6;border-left:4px solid #fa5252;padding:6px 14px;border-radius:999px;font-size:0.9em;">
<strong style="color:#c92a2a;">🏠 Atividade de casa</strong> — a atividade está logo abaixo
</div>
</div>

Exemplo 5 — Prática em laboratório

Resultado visual

Código HTML

<div style="font-family:'Segoe UI', Arial, Helvetica, sans-serif; max-width:520px; margin:10px 0;">
<div style="background:#eefaf6;border-left:4px solid #12b886;padding:6px 14px;border-radius:999px;font-size:0.9em;">
<strong style="color:#0f9f7a;">💻 Prática em laboratório</strong> — os arquivos estão logo abaixo
</div>
</div>

Exemplo 6 — Videoaulas

Resultado visual

Código HTML

<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;font-size:0.9em;">
<strong style="color:#1c7ed6;">🎥 Videoaulas</strong> — os vídeos estão logo abaixo
</div>
</div>