Projeto 1: HTML+CSS - Desenvolvimento da Quinta tarefa ----------------------------------------------------------------------------------------------------------------------------------------------------- 1. ATIVE O SERVIDOR DE PÁGINA (abra o painel de controle do XAMPP e 'dispare' o Apache e o MySQL) 2. Acessar o diretório /localhost/SeuNomeCompleto/html-css 3. Crie um diretório com nome tar5 (deve ficar ao lado do tar1, tar2, tar3 E tar4) 4. Copie o arquivo desenvolvido na Tarefa 4 (de divs sem include) para o diretório tar5. 5. Acesse o diretório TAR5 (aqui começa o desenvolvimento da tarefa 5). 6. Você leu no Slide 10 toda a especificação de uma página que monta quase todos os tipos de campos de formulário da HTML ( <4.0 ). Então... 7. Propomos um exercício: - Edite um arquivo .HTML (nome: form.html) com uma página que contenha uma tabela acomodando um formulário. Cada aluno da turma recebeu uma tabela para a qual devem montar um formulário para receber os dados digitados por um usuário na funcionalidade INCLUIR em um sistema de informação. Para este passo desta tarefa não importa se os tipos de dados se repitam na montagem do formulário. - DEPOIS de editar os campos de um formulário para a sua tabela, desenhe um traço horizontal e a seguir complete com campos de form para os Tipos de Dados Restantes para a HTML 4. - Terminada a inclusão de campo de formulário para a HTML 4, desenhe um novo traço horizontal e a seguir, neste mesmo arquivo, complemente seu formulário com campos dos seguintes tipos de dados da HTML 5: - color, date, time, week, month, number e range. Além desses tipos de dados, escolha mais 2 tipos de dados para campos de formulários da HTML 5 para seu formulário. - No mesmo diretório onde está seu form.html edite um programa em PHP que recebe os dados digitados e exibe uma página com os dados digitados. Dê o nome deste arquivo de 'tratador.php'. Lembre-se: este nome deve ser colocado no atributo ACTION na TAG
. - No arquivo form.html, inclua uma tabela com duas colunas e coloque na coluna da esquerda um texto descrevendo (ou apresentando) o que deve ser digitado no campo do formulário que deve estar na mesma linha e na coluna da direita. - No diretório TAR5 copie os arquivos do diretório tar4/div/divseminclude. - Troque o nome dos arquivos tarefa4.html e tarefa4.css para tarefa5.html e tarefa5.css respectivamente. - EDITE os arquivos do TAR5 que apresentem o menu na DIV no topo da tela e inclua um item "Formulário" apontando para o arquivo form.html. - Inclua o item "Formulário" à ESQUERDA do botão Voltar. - TESTE SEUS ARQUIVOS ACESSANDO O SITEMA POR TAREFA5.HTML - Acesse seu navegador. Coloque o cursor no campo de endereços e digite: http://localhost/SeuNomeCompleto/html-css/tar5/tarefa5.html (o arquivo que será acessado é o tarefa5.html) - Se necessário, altere seu arquivo e recarregue seu arquivo no navegador. 8. Renomeie o diretório ilp para SEUNOME e Gere um arquivo compactado deste diretório (com todos os subdireórios). SEUNOME deve escrito com letras minúsculas, sem acentos, sem espaços em branco e com a primeira letra de cada parte do nome com letras maiúsculas. O estudo das TAGs HTML e seletores CSS pode ser iniciado no site: https://www.w3schools.com/html/default.asp https://www.w3schools.com/css/default.asp Se for necessário consulte outros tutoriais. As cores podem ser escolhidas e visualizadas no site: https://coolors.co/