Trabalho2-HTML-Layout-Forms

Enviado por

ffvic37

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

6 visualizações

Trabalho2-HTML-Layout-Forms

Enviado por

ffvic37

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 5

AESA - Autarquia de Ensino Superior de Arcoverde

Desenvolvimento de Sistemas Web I

Prof. Rivelde Lopes de Freitas
Elementos Semânticos da Html5 e Formulários

Instruções Gerais
• Esta atividade deve ser realizada individualmente;
• Tecnologias permitidas: apenas HTML5. Não é permitido o uso de tecnologias adicionais
como CSS, JavaScript, Bootstrap etc. Trabalhos utilizando tais tecnologias serão anulados;
• Sintaxe da XHTML como <img/> ou <br/> não é permitida (anulará o trabalho);
• O website deve ser hospedado e disponibilizado online, conforme orientações disponíveis
no final deste documento;
• Ao construir o website, utilize dados fictícios. Jamais utilize dados pessoais como seu nome,
CPF, endereço, e-mail etc.;
• Esteja atento às observações sobre plágio apresentadas no final desde documento;
• Trabalhos com implementações utilizando trechos de códigos retirados de sites da Internet
ou de trabalhos de semestres anteriores serão anulados;
• As páginas web não devem conter qualquer conteúdo de caráter imoral, desrespeitoso,
pornográfico, discurso de ódio, desacato etc.;
• O trabalho deve ser entregue até a data/hora definida pelo professor. Não deixe para enviar
o trabalho nos últimos instantes, pois eventuais problemas relacionados à eventos adversos
como instabilidade de conexão, congestionamento de rede etc., não serão aceitos como
motivos para entrega da atividade por outras formas ou em outras datas;
• Este trabalho deve ser feito mantendo os trabalhos anteriores intactos, ou seja, os trabalhos
anteriores devem permanecer online conforme foram entregues;
• Trabalhos devem ser enviados pela plataforma Google Sala de Aula.

Instruções Gerais
1. Crie um website para uma clínica médica fictícia utilizando adequadamente os elementos
semânticos da HTML5. O website deve ser composto por três páginas:
• Página principal (Home) – arquivo index.html
• Página para apresentação de imagens da clínica (Galeria) – arquivo galeria.html
• Página com formulário de cadastro – arquivo cadastro.html
Página Home
A página principal do website deverá se apresentar como na figura a seguir. Os elementos
<header>, <nav>, <main> e <footer> devem ser utilizados de forma apropriada para definirem,
respectivamente, a região de cabeçalho da página (Clinica ABC Health), o menu com os links de
navegação (para as demais páginas do website), a região principal com informações da clínica e
a região de rodapé (contato/endereço). A página deve conter uma descrição utilizando o
elemento <meta> (veja slides de aula).
Página Galeria
A página galeria.html deve se apresentar como na figura a seguir. Faça uma cópia do arquivo
index.html e aproveite o seu conteúdo para confecção da página galeria.html. Utilize uma tabela
para apresentar as imagens em 2 linhas e 4 colunas.

Página de Cadastro
A página de cadastro deverá exibir um formulário contendo campos para o preenchimento das
seguintes informações:

Dados pessoais:
• Nome (obrigatório);
• E-mail (obrigatório);
• CPF (obrigatório);
• Idade (apenas números, obrigatório)
• Telefone (obrigatório);
• Data de nascimento (opcional);
• Sexo (opcional);
• Estado civil (opcional);

Endereço
• CEP (obrigatório);
• Tipo de logradouro (rua, avenida, praça, etc.) (obrigatório, caixa de seleção)
• Logradouro (obrigatório);
• Bairro (obrigatório);
• Cidade (obrigatório);
• Estado (obrigatório);
Informações Adicionais
• Campo opcional para seleção de interesses. Deve haver opções para que o usuário possa
selecionar um ou vários campos de interesse (devem ser disponibilizadas pelo menos as
opções: filmes, informática, games, livros e roupas);

• Campo opcional para o fornecimento de informações complementares de forma textuale

livre, que poderá conter múltiplas linhas de texto;
• Campo opcional para anexar um arquivo de imagem;

Observações
1. Os rótulos devem ser associados aos campos de maneira apropriada, utilizando o elemento
<label> em conjunto com o id do campo;
2. O formulário deve ser subdividido em três partes (Dados Pessoais, Endereço de Entrega e
Informações Adicionais) utilizando o elemento <fieldset>;
3. Deve haver um botão para que o formulário seja submetido pelo método POST para o destino
cadastraCliente.php;
4. O formulário deve conter pelo menos um elemento de cada tipo listado a seguir:
• <input type=”text”>
• <input type=”email”>
• <input type=”number”>
• <input type=”tel”>
• <input type=”date”>
• <input type=”radio”>
• <input type=”checkbox”>
• <select>
• <textarea>
5. O formulário deve conter um campo oculto (hidden) com name e value de sua escolha;
6. Assim que a página for carregada, o campo Nome deve receber o foco automaticamente;
7. O campo nome deve exigir que o usuário informe um texto contendo pelo menos 2 caracteres
e no máximo 50 caracteres (utilize minlength e maxlength);
8. Utilize o atributo pattern para exigir que o CPF esteja no formato xxx.xxx.xxx-xx;
9. Acrescente mais um campo textual, de sua escolha, na parte Dados Pessoais, que seja do
tipo somente leitura. Forneça um valor inicial para o campo;
10. Coloque um placeholder em um dos campos textuais;
11. Faça a validação do código HTML utilizando a ferramenta disponível no endereço
validator.w3.org.

Disponibilização Online
O trabalho devem ser enviados pelo plataforma Google Sala de Aula e disponibilizado online
utilizando o subdomínio gratuito registrado em site de hospedagem. Crie uma subpasta para o
trabalho no servidor de nome trabalho2. A página principal do trabalho deverá ser apresentada
quando o usuário digitarno navegador:

seusubdominio.com/trabalho2

Não altere ou exclua as pastas dos trabalhos anteriores.

Entrega
Além da disponibilização online, a pasta raiz contendo as subpastas dos exercícios deve ser
compactada no formato zip e enviado pela plataforma do Google Sala de Aula até a data limite
indicada pelo professor.

Adicione também um arquivo de nome link.txt, na pasta raiz, contendo a URL do trabalho online
(para a pasta raiz do trabalho).