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

NesteNos capítuloexemplos a seguir são apresentados algunsdiferentes modelos de rótulos que podem ser utilizados nasem disciplinas.disciplinas Emdo cadaMoodle. Cada exemplo é apresentado primeiroapresenta o resultado visual e logo abaixo o código HTML quecorrespondente podepara ser copiado e utilizado diretamenteutilização no Moodle.ambiente virtual.

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

Exemplo 7 — Leitura obrigatória

<div— style="font-family:'Segoeo UI',material Arial,está Helvetica,logo sans-serif;abaixo

Exemplo <div8 style="background:#f3f8ff;border-left:4px— solidMaterial #1c7ed6;padding:6pxcomplementar

Exemplo 9 — Aviso importante

Exemplo 10 — Estudo dirigido