Capítulo 18 - Modelos de Rótulos HTML para o Moodle
Capítulo 18 - Modelos de Rótulos HTML para o Moodle
Manual de uso do AVA Moodle • IFMT
Guia do(a) Professor(a)
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 ou materiais de leitura.
Nos exemplos a seguir são apresentados diferentes modelos de rótulos que podem ser utilizados nas disciplinas. Cada exemplo apresenta o resultado visual e o código HTML correspondente.
Exemplo 1 — Podcast da unidade
Resultado visual
🎧 Podcast da unidade — o episódio está logo abaixo
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;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
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
🧪 Avaliação — a avaliação está logo abaixo
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
🏠 Atividade de casa — a atividade está logo abaixo
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
💻 Prática em laboratório — os arquivos estão logo abaixo
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
🎥 Videoaulas — os vídeos estão logo abaixo
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 7 — Leitura obrigatória
📖 Leitura obrigatória — o material está logo abaixo
html
<div style="font-family:'Segoe UI', Arial, Helvetica, sans-serif; max-width:520px; margin:10px 0;"> <div style="background:#fff9db;border-left:4px solid #f59f00;padding:6px 14px;border-radius:999px;font-size:0.9em;"> <strong style="color:#e67700;">📖 Leitura obrigatória</strong> — o material está logo abaixo </div> </div>
Exemplo 8 — Material complementar
📚 Material complementar — os materiais estão logo abaixo
html
<div style="font-family:'Segoe UI', Arial, Helvetica, sans-serif; max-width:520px; margin:10px 0;"> <div style="background:#edf2ff;border-left:4px solid #364fc7;padding:6px 14px;border-radius:999px;font-size:0.9em;"> <strong style="color:#364fc7;">📚 Material complementar</strong> — os materiais estão logo abaixo </div> </div>
Exemplo 9 — Aviso importante
⚠️ Aviso importante — leia atentamente as orientações abaixo
<div style="font-family:'Segoe UI', Arial, Helvetica, sans-serif; max-width:520px; margin:10px 0;"> <div style="background:#e6fcf5;border-left:4px solid #20c997;padding:6px 14px;border-radius:999px;font-size:0.9em;"> <strong style="color:#0ca678;">🧠 Estudo dirigido</strong> — a atividade está logo abaixo </div> </div>
Além dos rótulos visuais apresentados no capítulo anterior, o Moodle também permite utilizar cards HTML para organizar conteúdos de forma mais estruturada e visualmente atrativa. Esses cards podem ser utilizados para apresentar materiais da disciplina, links importantes, livros, ferramentas, gravações de aulas e outros recursos educacionais.
Nos exemplos a seguir são apresentados diferentes modelos de cards que podem ser utilizados nas disciplinas. Cada exemplo apresenta o resultado visual e o código HTML correspondente.
