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. ComEsse pequenasrecurso estruturas HTML é possívelpossibilita criar elementos visuais que ajudam os estudantes a identificar rapidamente atividades, materiais de estudo, videoaulas, fórunsfóruns, atividades avaliativas e avaliações.outros recursos educacionais.

A seguir são apresentados alguns exemplosutilização de rótulos quepadronizados podemmelhora sera utilizadosnavegação nasno disciplinas.ambiente Emvirtual cadae exemplo,contribui primeiropara éuma apresentadoorganização mais clara e didática da disciplina.

Exemplo 1 — RótuloPodcast parada Podcastunidade

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 — RótuloFórum parade Fórumdú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;
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

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

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

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