Conteúdo:
O que é a Internet e como funciona.
Conceito de página web e navegadores.
Exemplos de sites educacionais.
Exemplo Prático:
Explorando Sites Educacionais:
Abra o navegador de internet (Google Chrome, Firefox, etc.).
Visite o site Portal do Professor.
Navegue pelas seções disponíveis e observe os recursos oferecidos.
Sugestão de Aplicação Pedagógica:
Utilize sites educacionais como recursos complementares em suas aulas, enriquecendo o conteúdo e promovendo a interação dos alunos com a tecnologia.
Conteúdo:
Definição de HTML (Linguagem de Marcação de Hipertexto).
A importância do HTML na criação de páginas web.
Visualização do código-fonte de páginas simples.
Exemplo Prático:
Visualizando o Código-Fonte de uma Página:
Acesse um site simples, como www.exemplo.com.
Clique com o botão direito do mouse em qualquer área da página.
Selecione "Exibir código-fonte da página" ou "Ver código-fonte".
Observe o código HTML que compõe a página.
Sugestão de Aplicação Pedagógica:
Compreender a estrutura das páginas web permite que você personalize conteúdos para seus alunos, criando materiais didáticos interativos.
Conteúdo:
Ferramentas necessárias: editor de texto simples (Bloco de Notas) e navegador web.
Estrutura básica de um documento HTML.
Passo a Passo: Criando um Arquivo HTML Vazio
Abra o Bloco de Notas (Windows) ou TextEdit (Mac).
Sem digitar nada, clique em Arquivo > Salvar como....
Nomeie o arquivo como pagina_inicial.html.
Certifique-se de que a opção "Salvar como tipo" esteja em "Todos os arquivos" (no Windows).
Salve o arquivo em uma pasta de fácil acesso.
Abra o arquivo no navegador para verificar se está funcionando (deve abrir uma página em branco).
Sugestão de Aplicação Pedagógica:
Preparar o ambiente permite que você comece a criar conteúdos personalizados para suas aulas.
Conteúdo:
Tags essenciais: <!DOCTYPE html>, <html>, <head>, <title>, <body>.
Exemplo Prático: Escrevendo a Estrutura Básica
html
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
</head>
<body>
</body>
</html>
Explicação Linha por Linha:
<!DOCTYPE html>: Informa ao navegador que o documento é do tipo HTML5.
<html>: Início do conteúdo HTML.
<head>: Seção que contém metadados e informações sobre o documento.
<title>Minha Primeira Página</title>: Define o título da página que aparece na aba do navegador.
</head>: Fim da seção de cabeçalho.
<body>: Início do corpo da página, onde o conteúdo visível será inserido.
</body>: Fim do corpo da página.
</html>: Fim do documento HTML.
Passo a Passo:
Abra o arquivo pagina_inicial.html no editor de texto.
Digite o código acima exatamente como está.
Salve o arquivo.
Abra o arquivo no navegador e observe que o título da aba mudou para "Minha Primeira Página".
Conteúdo:
Títulos e subtítulos: <h1> a <h6>.
Parágrafos: <p>.
Formatação de texto: negrito <b>, itálico <i>, sublinhado <u>.
Exemplo Prático: Adicionando Conteúdo e Formatação
html
<!DOCTYPE html>
<html>
<head>
<title>Apresentação Pessoal</title>
</head>
<body>
<h1>Bem-vindos à minha página</h1>
<p>Olá! Meu nome é <b>Manoel Santos</b> e sou professor de História.</p>
<p>Estou animado para compartilhar conteúdos interessantes com vocês.</p>
</body>
</html>
Explicação Linha por Linha:
<h1>Bem-vindos à minha página</h1>: Cria um título principal.
<p>: Inicia um parágrafo.
<b>Manoel Santos</b>: Coloca o texto Manoel Santos em negrito.
</p>: Finaliza o parágrafo.
Passo a Passo:
Dentro da tag <body>, insira o código acima.
Salve o arquivo.
Atualize a página no navegador para ver as alterações.
Sugestão de Aplicação Pedagógica:
Crie uma página de apresentação para os alunos, ajudando a construir um relacionamento mais próximo.
Conteúdo:
Links: tag <a href="">.
Imagens: tag <img src="">.
Atributos importantes (alt, title).
Exemplo Prático: Adicionando um Link e uma Imagem
html
<p>Visite o site do <a href="https://www.gov.br/mec/pt-br" target="_blank">Ministério da Educação</a> para mais informações.</p>
<img src="imagem_escola.jpg" alt="Imagem da Escola" width="500">
Explicação Linha por Linha:
<a href="URL" target="_blank">texto do link</a>: Cria um link que abre em nova aba.
<img src="caminho/da/imagem" alt="descrição" width="tamanho">: Insere uma imagem e define sua largura.
Passo a Passo:
Certifique-se de que a imagem imagem_escola.jpg está na mesma pasta do arquivo HTML.
Insira o código acima dentro da tag <body>.
Salve o arquivo.
Atualize a página no navegador.
Sugestão de Aplicação Pedagógica:
Inclua links para recursos adicionais e imagens que ilustrem o conteúdo das aulas, tornando-as mais interativas.
Conteúdo:
Listas ordenadas <ol> e não ordenadas <ul>.
Itens de lista <li>.
Tabelas básicas: <table>, <tr>, <td>.
Exemplo Prático: Criando uma Lista e uma Tabela
Lista de Materiais Escolares:
html
<h2>Materiais Necessários:</h2>
<ul>
<li>Lápis</li>
<li>Caderno</li>
<li>Borracha</li>
</ul>
Tabela de Horários:
html
Copiar código
<h2>Horário das Aulas</h2>
<table border="1">
<tr>
<th>Dia</th>
<th>Matéria</th>
<th>Horário</th>
</tr>
<tr>
<td>Segunda-feira</td>
<td>História</td>
<td>08:00 - 09:00</td>
</tr>
<tr>
<td>Terça-feira</td>
<td>Geografia</td>
<td>09:00 - 10:00</td>
</tr>
</table>
Explicação Linha por Linha:
<ul>: Inicia uma lista não ordenada.
<li>: Define um item da lista.
<table border="1">: Cria uma tabela com bordas.
<tr>: Inicia uma linha da tabela.
<th>: Define uma célula de cabeçalho (em negrito).
<td>: Define uma célula de dados.
Passo a Passo:
Insira o código da lista e da tabela dentro da tag <body>.
Salve o arquivo.
Atualize a página no navegador.
Sugestão de Aplicação Pedagógica:
Organize informações importantes como cronogramas, listas de tarefas e recursos em listas e tabelas.
Conteúdo:
Integração de todos os elementos aprendidos.
Boas práticas na organização do conteúdo.
Exemplo Prático: Página Completa
html
Copiar código
<!DOCTYPE html>
<html>
<head>
<title>Página Educativa de História</title>
</head>
<body>
<h1>Bem-vindos ao Portal de História</h1>
<p>Neste espaço, você encontrará recursos para aprofundar seus conhecimentos.</p>
<h2>Atividades</h2>
<ul>
<li><a href="atividade1.html">Atividade 1: Revolução Francesa</a></li>
<li><a href="atividade2.html">Atividade 2: Era Vargas</a></li>
</ul>
<h2>Materiais de Apoio</h2>
<table border="1">
<tr>
<th>Conteúdo</th>
<th>Link</th>
</tr>
<tr>
<td>Vídeo sobre a Idade Média</td>
<td><a href="https://www.youtube.com/watch?v=exemplo">Assistir</a></td>
</tr>
<tr>
<td>Artigo sobre a Guerra Fria</td>
<td><a href="https://www.exemplo.com/artigo">Ler</a></td>
</tr>
</table>
<h2>Contato</h2>
<p>Para dúvidas, envie um e-mail para: <a href="mailto:profjoao@escola.com">profjoao@escola.com</a></p>
</body>
</html>
Passo a Passo:
Copie e cole todo o código acima em um novo arquivo HTML.
Salve o arquivo como pagina_educativa.html.
Coloque os arquivos das atividades na mesma pasta, se disponíveis.
Abra o arquivo no navegador para visualizar a página completa.
Sugestão de Aplicação Pedagógica:
Utilize esta página como um portal para os alunos acessarem atividades, materiais e informações relevantes.
Conteúdo:
Conceito básico de CSS.
Estilos inline para personalizar a aparência.
Exemplo Prático: Aplicando Estilos Inline
html
Copiar código
<h1 style="color: navy; text-align: center;">Portal de História</h1>
<p style="font-size: 18px; line-height: 1.5;">Este portal oferece diversos recursos para enriquecer seu aprendizado.</p>
Explicação Linha por Linha:
style="color: navy;": Define a cor do texto.
text-align: center;: Centraliza o texto.
font-size: 18px;: Define o tamanho da fonte.
line-height: 1.5;: Define o espaçamento entre linhas.
Passo a Passo:
Adicione os estilos inline aos elementos desejados.
Salve o arquivo.
Atualize a página no navegador para ver as mudanças.
Sugestão de Aplicação Pedagógica:
Tornar a página visualmente mais atraente pode aumentar o engajamento dos alunos.
Conteúdo:
Revisão dos principais conceitos aprendidos.
Apresentação das páginas criadas pelos professores.
Recursos adicionais para aprofundamento.
Atividade Prática:
Apresentação das Páginas:
Cada professor abre sua página no navegador.
Compartilhe com o grupo, destacando os elementos utilizados.
Discuta as dificuldades encontradas e as soluções aplicadas.
Sugestão de Aplicação Pedagógica:
Promova a troca de experiências e ideias, incentivando a colaboração entre os colegas.
Criação de Blogs ou Sites de Turma:
Compartilhe informações, atividades e novidades com os alunos e pais.
Exemplo: Um site com notícias da turma, calendário de eventos e galerias de fotos.
Materiais Interativos:
Desenvolva páginas com conteúdos complementares às aulas, incluindo links, imagens e vídeos.
Exemplo: Recursos adicionais sobre um tema estudado, com vídeos explicativos e links para artigos.
Comunicação:
Utilize páginas HTML para criar newsletters ou informativos escolares.
Exemplo: Boletins mensais com atualizações sobre projetos e desempenho dos alunos.
Projetos com Alunos:
Incentive os alunos a aprender HTML, promovendo projetos de criação de sites sobre temas estudados.
Exemplo: Alunos criam páginas sobre animais em extinção, compartilhando pesquisas e imagens.
Tutoriais Online:
W3Schools - HTML Tutorial
Editores de Código Avançados:
Comunidades e Fóruns:
Grupos de professores em redes sociais focados em tecnologia educacional
Ao finalizar este curso, você estará apto a criar páginas web básicas, integrando recursos digitais às suas práticas pedagógicas e enriquecendo o processo de ensino-aprendizagem. A tecnologia é uma aliada poderosa na educação, e o conhecimento de HTML é um passo importante nessa jornada.