Para desenvolver Aula Prática Programação com linguagem de marcação, comece identificando os objetivos e as entregas solicitadas no roteiro. A seguir, veja os pontos presentes na descrição desta atividade e organize teu relatório de acordo com as orientações do curso.
O que é esta aula prática?
Antes de começar, leia a apresentação e identifique o tema, a unidade e o formato pedido.
Disciplina: Programação com Linguagem de Marcação — Unidade "Fundamentos em HTML" e Unidade "Técnicas e Aplicações de HTML e CSS".
Criação de formulários: tag , atributos action e method e uso de name para campos.
Elementos de formulário: , , e tipos HTML5 (email, tel, date).
Ferramenta: W3Schools Tryit Editor (editor online para testar HTML, CSS e JavaScript).
Box Model em CSS: conteúdo, padding, border e margin; criação de stylesheet (style.css) e visualização do resultado.
Objetivos e conhecimentos trabalhados
Use os objetivos do roteiro para definir o que a atividade precisa demonstrar.
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.
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.
Ferramentas e materiais mencionados no roteiro
Prepare os recursos citados na atividade e registre as versões ou configurações usadas quando forem relevantes.
SOLUÇÃO DIGITAL
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.
SOLUÇÃO DIGITAL
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.
Como desenvolver a atividade passo a passo
Execute cada etapa na ordem indicada e registre o que foi feito para depois explicar o processo no relatório.
Esta atividade prática da disciplina "Programação com Linguagem de Marcação" apresenta duas frentes de trabalho: construção de formulários em HTML/HTML5 e desenvolvimento de um projeto simples aplicando o Box Model em HTML e CSS. As tarefas são planejadas para execução virtual, com uso do editor online W3Schools Tryit Editor e foco em exercícios que permitem visualizar o código e o resultado lado a lado.
O roteiro aborda fundamentos em HTML relacionados à criação de (atributos action e method), elementos comuns (text, submit, reset) e tipos introduzidos pelo HTML5 (email, tel, date). Em paralelo, a atividade sobre Box Model orienta a criação da estrutura HTML, a separação de um arquivo de estilos (style.css) e a aplicação de propriedades de margem, borda e preenchimento para compor uma caixa estilizada.
O que é desenvolvido nesta atividade: execução prática de formulários e de um pequeno projeto de layout. Inclui a criação de um documento HTML básico, a inserção de uma tag com campos identificados por atributos name, a experimentação de diferentes tipos de (inclusive os novos tipos HTML5), a aplicação de CSS para melhorar aparência e o entendimento do Box Model ao estilizar uma (.box). A atividade é conduzida no W3Schools Tryit Editor para testar código em tempo real e verificar o comportamento dos elementos.
NOME DA DISCIPLINA: PROGRAMAÇÃO COM LINGUAGEM DE MARCAÇÃO
PROCEDIMENTOS PRÁTICOS
Procedimento/Atividade nº 1 (Virtual)
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:
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.
6. Selecione a linguagem que deseja usar: HTML, CSS ou JavaScript. Clique na linguagem
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.
· 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.
NOME DA DISCIPLINA: PROGRAMAÇÃO COM LINGUAGEM DE MARCAÇÃO
Unidade: TÉCNICAS E APLICAÇÕES DE HTML E CSS
PROCEDIMENTOS PRÁTICOS
Procedimento/Atividade nº 1 (Virtual)
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:
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
· No editor de código à esquerda, crie a estrutura HTML básica:
O código acima cria um documento HTML com uma que será estilizada com CSS. O
arquivo de estilo (style.css) será importado no .
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:
· Volte ao editor HTML à esquerda e clique no botão "Run" para ver a visualização do projeto na
· Você deve ver a caixa estilizada com base no Box Model definido nos estilos CSS.
Como conferir e avaliar o trabalho
Confira os critérios e perguntas do roteiro antes de finalizar a entrega.
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.
Checklist:
• Aplicou estilos para replicar o Diagrama de Box Model.
• Verificou o resultado no Tryit Editor.
Resultados e organização do relatório
Apresente o que foi obtido e relacione os resultados com os objetivos da atividade.
Resultados de Aprendizagem:
Ser capazes de criar formulários em HTML e HTML5, compreender os atributos da tag [form],
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.
PROGRAMAÇÃO COM LINGUAGEM DE MARCAÇÃO
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
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.
• A(s) atividades a ser(em) realizada(s) estão descritas no Roteiro de Atividade Prática,
• 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
• 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
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.
Como estruturar o relatório
Organize a entrega em identificação da atividade, objetivos, recursos utilizados, descrição dos procedimentos, registros dos resultados e conclusão. Ajuste essa sequência ao modelo exigido pela instituição e inclua apenas observações e evidências obtidas durante a tua própria execução.
Checklist antes de entregar
- Conferir se todos os objetivos do roteiro foram contemplados.
- Descrever os procedimentos na ordem em que foram realizados.
- Inserir registros, imagens ou arquivos quando a atividade solicitar.
- Relacionar os resultados com as tarefas e revisar o formato de entrega exigido.
