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. 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çãocapítulo são apresentados alguns modelos de rótulos padronizadosque melhorapodem aser navegaçãoutilizados 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.

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:visual

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

    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

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

    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

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

    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

    🏠 Atividade de casa — a atividade 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:#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

    💻 Prática em laboratório — os arquivos 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:#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

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

    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:

    💻 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