Aula Prática Programação com linguagem de marcação
ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: PROGRAMAÇÃO COM LINGUAGEM DE MARCAÇÃO
Unidade: FUNDAMENTOS EM HTML
Seção: Construindo formulários
OBJETIVOS
Definição dos objetivos da aula prática:
• Compreender o conceito de formulários em HTML.
• Aprender a criar formulários em HTML e HTML5.
• Familiarizar-se com os atributos da tag [form], como action e method.
• Utilizar os elementos de formulário [input] para coletar dados do usuário.
• Realizar uma aplicação prática em HTML5.
SOLUÇÃO DIGITAL
• HTML5 (Software)
HTML5 – É uma linguagem de marcação de código aberto que é usada para criar conteúdo na
web, como sites, jogos e aplicativos.
• W3SCHOOLS TRYIT EDITOR (Software)
W3Schools Tryit Editor – É um editor online que permite testar e experimentar diferentes códigos
HTML, CSS e JavaScript diretamente no navegador.
PROCEDIMENTOS PRÁTICOS
Procedimento/Atividade nº 1 (Virtual)
Atividade proposta:
Construção de Formulários em HTML e HTML5
Procedimentos para a realização da atividade:
Sugestão de editor: Acesse o Tryit Editor no site do W3Schools:
3
1. Abra o seu navegador da web.
2. Vá para o site oficial do W3Schools em https://www.w3schools.com/.
3. Navegue até a seção “Tryit Editor”:
4. No menu superior, role o mouse sobre a guia “Try it Yourself” no canto superior direito.
5. Escolha a linguagem:
6. Selecione a linguagem que deseja usar: HTML, CSS ou JavaScript. Clique na linguagem
desejada.
7. Você será redirecionado para a página do Tryit Editor correspondente à linguagem selecionada.
8. Na página do Tryit Editor, você verá três seções:
· Código do editor: Aqui você pode escrever seu código HTML, CSS ou JavaScript.
· Janela de resultado: Essa área exibe o resultado do código que você escreveu.
· Console (opcional): Na parte inferior da página, você pode ativar a guia “Console” para ver
mensagens de depuração do JavaScript.
Passo 1: Introdução
· Apresente uma breve introdução sobre a importância dos formulários em websites.
· Explique a diferença entre HTML e HTML5.
· Contextualize a atividade e seus objetivos.
Passo 2: Criando um Formulário Simples (15 minutos)
· Crie um documento HTML em branco.
· Dentro do <body>, crie uma tag <form> com os atributos action e method.
· Explique que o atributo action define para onde os dados do formulário serão enviados e que o
method define como os dados serão enviados (GET ou POST).
Passo 3: Elementos de Formulário
Dentro do <form>, adicione os seguintes elementos de formulário: campo de texto (<input
4
type=”text”>), botão de envio (<input type=”submit”>), e botão de limpar (<input type=”reset>).
Passo 4: Estilização e Layout
· Adicione algum CSS para melhorar o visual do formulário (opcional).
· Explique como o CSS pode ser usado para personalizar a aparência dos formulários.
Passo 5: HTML5 e Novos Tipos de Campo
· Introduza os novos tipos de campo HTML5, como email, tel e date.
· Mostre como utilizá-los no formulário.
Checklist:
• Criou um [form] com os atributos action e method.
• Incluiu elementos de formulário, como [input] para coleta de dados.
• Utilizou atributos name para identificar os campos do formulário.
• Aplicou estilos CSS para melhorar o layout (opcional).
• Utilizou elementos de formulário HTML5, se apropriado.
RESULTADOS
Resultados de Aprendizagem:
Ser capazes de criar formulários em HTML e HTML5, compreender os atributos da tag [form],
5
bem como saber como estilizá-los com CSS. Eles também deverão estar familiarizados com os
novos tipos de campo HTML5 e como usá-los para coletar informações específicas dos usuários.
Unidade: 3
Seção: 4
PROGRAMAÇÃO COM LINGUAGEM DE MARCAÇÃO
Roteiro
Aula Prática
2
ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: PROGRAMAÇÃO COM LINGUAGEM DE MARCAÇÃO
Unidade: TÉCNICAS E APLICAÇÕES DE HTML E CSS
Seção: Desenvolvendo com box model
OBJETIVOS
Definição dos objetivos da aula prática:
• Compreender o conceito de formulários em HTML.
• Aprender a criar formulários em HTML e HTML5.
• Familiarizar-se com os atributos da tag [form], como action e method.
• Utilizar os elementos de formulário [input] para coletar dados do usuário.
• Realizar uma aplicação prática em HTML5.
SOLUÇÃO DIGITAL
• HTML5 (Software)
HTML5 – É uma linguagem de marcação de código aberto que é usada para criar conteúdo na
web, como sites, jogos e aplicativos.
• W3SCHOOLS TRYIT EDITOR (Software)
W3Schools Tryit Editor – É um editor online que permite testar e experimentar diferentes códigos
HTML, CSS e JavaScript diretamente no navegador.
PROCEDIMENTOS PRÁTICOS
Procedimento/Atividade nº 1 (Virtual)
Atividade proposta:
Criar um projeto simples utilizando HTML e CSS, seguindo o conceito do Box Model. O Box
Model é uma parte fundamental do desenvolvimento web, que define como os elementos HTML
são renderizados com suas margens, bordas, preenchimento e conteúdo.
Procedimentos para a realização da atividade:
3
Passo 1: Crie o Projeto (HTML) no W3Schools Tryit Editor
· Abra seu navegador e acesse o W3Schools Tryit Editor em
https://www.w3schools.com/html/tryit.asp.
· Você verá uma tela dividida em duas partes: à esquerda, o editor de código HTML, e à direita, a
visualização da página.
Passo 2: Estrutura HTML
· No editor de código à esquerda, crie a estrutura HTML básica:
O código acima cria um documento HTML com uma <div> que será estilizada com CSS. O
arquivo de estilo (style.css) será importado no <head>.
Passo 3: Estilize com CSS
Agora, crie o arquivo de estilo. Clique no botão “New Pen” acima do editor HTML à esquerda.
Insira o código CSS no novo painel.
Aplique os estilos CSS para a classe .box com base no Diagrama de Box Model desejado. O
exemplo abaixo define uma caixa com tamanho, preenchimento, borda e margem:
Passo 4: Visualização do Projeto
· Volte ao editor HTML à esquerda e clique no botão “Run” para ver a visualização do projeto na
4
janela à direita.
· Você deve ver a caixa estilizada com base no Box Model definido nos estilos CSS.
Checklist:
• Criou a estrutura HTML básica.
• Criou o arquivo de estilo CSS.
• Aplicou estilos para replicar o Diagrama de Box Model.
• Verificou o resultado no Tryit Editor.
RESULTADOS
Resultados de Aprendizagem:
Compreender o conceito do Box Model em HTML e CSS, ser capaz de criar layouts com
autonomia e replicar um Diagrama de Box Model no Tryit Editor do W3Schools. Esta atividade
visa fortalecer suas habilidades de desenvolvimento web e compreensão do Box Model como
parte fundamental do design de páginas da web.
NORMAS PARA ELABORAÇÃO E ENTREGA DO RELATÓRIO DE ATIVIDADE PRÁTICA
Olá, estudante. Tudo bem?
As atividades práticas visam desenvolver competências para a atuação profissional. Elas são
importantes para que você vivencie situações que te prepararão para o mercado de trabalho.
Por isso, trazemos informações para que você possa realizar as atividades propostas com êxito.
1. Que atividade deverá ser feita?
• A(s) atividades a ser(em) realizada(s) estão descritas no Roteiro de Atividade Prática,
disponível no AVA.
• Após a leitura do Roteiro, você deverá realizar a(s) atividade(s) prática(s) solicitadas e
elaborar um documento ÚNICO contendo todas as resoluções de acordo com a proposta
estabelecida.
• O trabalho deve ser autêntico e contemplar todas as resoluções das atividades
propostas. Não serão aceitos trabalhos com reprodução de materiais extraídos da
internet.
2. Como farei a entrega dessa atividade?
• Você deverá postar seu trabalho final no AVA, na pasta específica relacionada à atividade
prática, obedecendo o prazo limite de postagem, conforme disposto no AVA.
• Todas as resoluções das atividades práticas devem ser entregues em um ARQUIVO
ÚNICO de até 10 MB.
• O trabalho deve ser enviado em formato Word ou PDF, exceto nos casos em que há
formato especificado no Roteiro.
• O sistema permite anexar apenas um arquivo. Caso haja mais de uma postagem, será
considerada a última versão.
IMPORTANTE:
• A entrega da atividade, de acordo com a proposta solicitada, é um critério de aprovação
na disciplina.
• Não há prorrogação para a postagem da atividade.
Aproveite essa oportunidade para aprofundar ainda mais seus conhecimentos.
Bons estudos!
Aula Prática Programação com linguagem de marcação
Produtos relacionados
