Aula03 pptx

Prévia do material em texto

DEV Full Stack - HTML e CSS
Aula03 – Tabelas e formulários
Eduardo Xavier
Aula 3: Tabelas e formulários
● Tópicos:
–
–
F ormulários
Tabelas
Formulários
● A tag encapsula um conjunto de tags que 
criam um formulário para entrada de dados e 
submissão desses dados para algum método de 
tratamento.
Nessa tag também se define o que deve ser feito com 
os dados preenchidos nos campos do formulário 
quando ele for submetido.
●
● Exemplos: 
https://www.w3schools.com/tags/tag_form.asp
https://www.w3schools.com/tags/tag_form.asp
Formulários
● Há diversos tipos de campos para entrada de dados que 
podem ser definidos pela tag 
–
Textos 
Botões Check 
boxes 
Seleções
... e muitos outros
–
–
–
–
● Exemplos: 
https://www.w3schools.com/tags/tag_input.asp
https://www.w3schools.com/tags/tag_input.asp
Atividade 01
● Alterando o currículo
– Vamos permitir que possíveis 
interessados em contratar você 
consigam entrar em contato.
Crie um link em sua página de 
contatos que leva o usuário a uma 
nova página onde existe um 
formulário que permita o envio de 
perguntas a você.
–
● OBS: O tratamento das 
perguntas não será 
desenvolvido. Por isso, basta 
enviar um e-mail com a 
pergunta.
Meu 
Currículo
Tabelas
●
Tabelas são uma boa forma de organizar informações na 
tela e criar uma visão mais sistemática.
Tags:
●
– define a tabela
 estabelece uma linha
 define um cabeçalho (header) de 
coluna (é opcional)
 define uma célula (elemento de dado) na 
tabela
–
–
–
● https://www.w3schools.com/html/html_tables.asp
https://www.w3schools.com/html/html_tables.asp
Atividade 02
● Pizzaria
– Construa uma página utilizando tabelas que 
funcione como o cardápio de uma pizzaria. Esse 
cardápio deve conter pelo menios 4
itens:
–
● 3 tipos diferentes de pizza 1 
bebida●
– E para cada um dos itens deve ser 
informado:
● O nome do produto Uma 
descrição simples
Uma imagem do produto O 
preço do produto
●
●
●
– Utilize imagens da internet para ilustrar seus 
produtos, simular o logotipo da pizzaria e 
qualquer outra ilustração necessária.
Oba, 
Pizza!
Divisões e Blocos
▪ Uma forma interessante de agrupar informações em uma página HTML é reunir 
os conteúdos em blocos e divisões
▪ Tags:
 
 
 
▪ https://www.w3schools.com/html/html_blocks.asp
▪ https://www.w3schools.com/tags/tag_section.asp
https://www.w3schools.com/html/html_blocks.asp
https://www.w3schools.com/tags/tag_section.asp
Fim da Aula