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. EsseEsses recursorótulos possibilitafuncionam criarcomo elementosmarcadores visuais que ajudam os estudantes a identificar rapidamente materiaiso tipo de estudo,material disponível, como videoaulas, fóruns, atividades avaliativasavaliativas, epodcasts outrosou recursosmateriais educacionais.de leitura.

ANeste utilizaçãcapítulo são apresentados alguns modelos de rótulos padronizadosque melhorapodem aser navegaçã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 ambiente virtual e contribui para uma organização mais clara e didática da disciplina.Moodle.

Exemplo 1 — Podcast da unidade

Resultado visual:visual

Código HTML: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:visual

Código HTML: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:visual

Código HTML: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:visual

Código HTML: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>

Exemplo 5 — Atividade prática

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;">💻 Atividade prática</strong> — realize a atividade proposta
</div>
</div>

Boas práticas de utilização