Ir para o conteúdo principal

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

Capítulo 18 – Modelos de Rótulos HTML para o Moodle
Manual AVA Moodle IFMT • CREaD
Manual do Docente

O Moodle permite utilizar rótulos com HTML para organizar visualmente os conteúdos da disciplina. Esse recurso possibilita criar elementos visuais que ajudam os estudantes a identificar rapidamente materiais de estudo, videoaulas, fóruns, atividades avaliativas e outros recursos educacionais.

A utilização de rótulos padronizados melhora a navegação no ambiente virtual e contribui para uma organização mais clara e didática da disciplina.

Objetivo dos rótulos visuais
  • Identificar rapidamente o tipo de conteúdo.
  • Padronizar a organização da disciplina.
  • Destacar materiais e atividades importantes.
  • Facilitar a navegação dos estudantes.

Exemplo 1 — Podcast da unidade

Resultado visual:

🎧 Podcast da unidade — o episódio está logo abaixo

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:

💬 Fórum de dúvidas — o fórum está logo abaixo

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:

🧪 Avaliação — a avaliação está logo abaixo

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 — Videoaulas

Resultado visual:

🎥 Videoaulas — os vídeos estão logo abaixo

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>

Exemplo 5 — Atividade prática

Resultado visual:

💻 Atividade prática — realize a atividade proposta

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

  • Utilize rótulos para indicar claramente o tipo de material.
  • Mantenha um padrão visual na disciplina.
  • Evite utilizar muitos estilos diferentes.
  • Utilize cores e ícones de forma consistente.
  • Organize os conteúdos progressivamente dentro das unidades.
CREaD • Instituto Federal de Mato Grosso • 2026 • Manual do Docente – AVA Moodle
Voltar ao topo