HTML – Tabelas, Formulários e Blocos Semânticos

• Atividade 04: Criar 2 novas páginas HTML, conforme layouts:

- Usar a META TAG obrigatória de Codificação de Caractere (charset);

- Descompactar o arquivo Imagens_Ativ04.rar para criar a pasta Imagens
- Criar a pasta (diretório) “Encomendas”, conforme apresentado abaixo:

- Seguir as indicações das tags em destaque.

Arquivo Index.html
- O Título do Navegador deve ser: “Pães Doces e Bolos”

Bloco
Semântico Cabeçalho Tamanho 1
Lista Não Ordenada
header
Link para a própria página
(Principal) e para a segunda página
que será criada nesta atividade Tabela com bordas
Dimensão:
Cabeçalho Tamanho 2 2 linhas e 4 colunas

Bloco
Semântico

main

Células com destaque

Células com
destaque
Arquivos / Textos Alternativos / Descrições:
As imagens dos Bolos devem ser
links para a segunda página que
será criada nesta atividade
Imagens
Doce01.png / Creme / Creme
Doce02.png / Chocolate / Chocolate
Doce03.png / Nozes / Nozes
Bolo10.png / Chocolate / Chocolate
Bolo11.png / Pêssego / Pêssego
Bolo12.png / Chantilly / Chantilly

Altura: 200
 Arquivo Index_Encomendas.html
- Este arquivo deve ser armazenado dentro da pasta “Encomendas”
- O Título do Navegador deve ser: “Encomendar Bolos”

Bloco
Semântico
Cabeçalho Tamanho 1
header
Lista Não Ordenada

Link para a própria página e para a primeira

página criada nesta atividade (Principal)

Cabeçalho Tamanho 2

Tabela com bordas e

Legenda Superior
Dimensão:
2 linhas e 3 colunas

Células com Células com destaque

Bloco destaque
Semântico
Imagens
main
Arquivos / Textos Alternativos
Bolo01.png / Bolo de Chocolate
Bolo02.png / Bolo de Frutas
Bolo03.png / Bolo Misto

Largura: 200

Detalhes sobre o Formulário:

- Reproduzir o Formulário, conforme Layout. Usar o método “Get”;

- Os elementos do formulário estão separados por quebras de linhas;
- O campo “Nome” deve aceitar até 35 caracteres. Este campo possui uma dica para auxiliar
o preenchimento e deve receber o foco no momento do carregamento da página;
- O campo “DDD” deve aceitar 2 caracteres e o campo “Telefone” deve aceitar 10
caracteres. Os dois campos devem conter dicas para auxiliar o preenchimento;
- A Lista de Seleção de “Sabor” deve conter as opções: “Chocolate”, “Frutas” e “Misto”. O
primeiro item da lista deve apresentar o texto “Escolha...”. Este item deve estar
previamente selecionado e desabilitado;
- O campo “Tipo” deve permitir apenas uma única seleção;
- O campo “Tamanho” deve ser do tipo Numérico e deve aceitar valores de 1 a 10;
- O campo “Observações” é uma área de texto e deve ter 3 linhas de altura, 80 colunas de
largura e mais a dica para auxiliar o preenchimento.
- O botão “Enviar Pedido” deve submeter as informações do formulário e o botão “Limpar”
deve apagar o preenchimento de todos os campos.