Projeto 1: HTML+CSS - Desenvolvimento da 4ª tarefa Desenvolvimento de TABELAS nas páginas HTML. --------------------------------------------------------------------------------------------------------------------------------- Documento revisado em: 2026-04-08 - 19:00 ================================================================================================================================= 1. Leia e Certifique-se de ter feito todos os passos do texto disponível em: https://disciplinas.fatecourinhos.edu.br/ilp540/ilp540.php Tarefas|Projetos >> Orientação Geral para Tarefas e Projeto 2. Acesse o diretório ilp540/HTML-CSS e COPIE o diretório tar4 para outro diretório com nome tar5. No diretório tar5 faremos a tarefa de Estruturação de DIVISÕES (Quadros) para o conteúdo das páginas HTML. Vamos fazer DUAS implementações do mesmo conceito. Usando as TAGs ...... e a seguir com a TAG
...
combinado com CSS. 3. Implementando ....... Acesse o diretório tar5 e renomeie o arquivo tar4.html para frame.html. CRIE UM subdiretório com nomes 'frame'. MOVA todos os ARQUIVOS do diretório 'tar5' para o subdiretório 'frame'. COPIE o subdiretório 'frame' para o diretório 'div'. 4. Acesse o diretório 'frame'. Edite um novo arquivo com nome frame.html e implemente uma estrutura de quadros com as TAGs ...... sendo: . divisão horizontal com o quadro superior com 40 pixels de altura, sem exibir a borda. O quadro superior acomoda um arquivo com nome menu.html. O nome do quadro superior deve ser 'opcoes'. O quadro inferior (tendo a altura com restante da tela), deve ser nomeado 'painel', o arquivo acomodado neste quadro deve ser nomeado 'entrada.html'. 5. Todos os arquivos .html (exceto o frame.html) devem montar uma TABELA PRINCIPAL com três colunas como especificado na Tarefa 4. Na célula CENTRAL devem ser acomodados os acessos ao demais arquivos que montam as páginas, sendo os nomes dos arquivos: entrada.html, identifica.html, habilcarac.html, defeimania.html, hobbieslaz.html, futuroprox.html e ancoracess.html. TODOS os acessos apresentados na página montada no menu.html devem indicar que o arquivo do acesso deve ser aberto no quadro PAINEL. 6. O arquivo menu.html deve apresenar uma página exibindo (em título) o Termo "Tarefa - 5 [Frame] | ". Ao lado direito do Título devem ser vistos os acessos aos arquivos que montam as páginas do site, quais sejam: 'Identificação'-[identifica.html], 'Habilidades & Características'-[habilcarac.html], 'Defeitos & Manias'-[defeimania.html], 'Hobbies & Lazer'-[hobbieslaz.html], 'Futuro'-[futuroprox.html], 'Âncoras'-[ancoracess.html]; Á direita do acesso âncoras deve ser posicionamento um botão com termo 'Sair' executando a função histry.go(-1). Ainda na página montada em menu.html deve ser visto um traço em cor preto com espessura de 1 pixel ocupando 100% da largura disponível no elemento onde a página está acomodada. Esta linha deve ser vista abaixo da linha dos acessos. 7. O arquivo entrada.html deve ser criado e seu conteúdo deve instruir aos usuários como navegar pelo sistema buscando as páginas pelos acessos apresentados no topo da tela. Também nesta página devem ser incluídos os nome e RA do aluno. 8. Edite os arquivos identifica.html, habilcarac.html, defeimania.html, hobbieslaz.html, futuroprox.html e ancoracess.html e RETIRE o trecho que emite o texto Tarefa - 4 e o traço horizontal na tela. devem ter sua página exibida no quadro PAINEL. À direita do acesso à página feita em ancoracess.html, deve ser disponibilizado um botão acionando a função history.go(-1) e com título SAIR. 9. Terminado a estruração dos quadros... - TESTE SEUS ARQUIVOS ACESSANDO O SISTEMA POR frame.HTML - Acesse seu navegador. Coloque o cursor no campo de endereços e digite: http://localhost/CaminhoDoSeuDiretórioHTML-CSS/tar5/frame/frame.html (o arquivo que será acessado é o frame.html) - Se necessário, altere seu arquivo e recarregue seu arquivo no navegador. 10. Todas as linhas que implementam a função history.go() devem ter a TAG retirada do código-fonte de todos os programas EXCETO do arquivo menu.html .O botão 'Voltar' deve ser retirado de TODAS as páginas EXCETO na pagina montada pelo programa menu.html (onde o texto do botão é 'sair'). Em todos os arquivos onde o botão esteja posionado em uma linha de uma tabela, TODA a LINHA deve ser removida. 11. Depois de todos os testes. Feche todas as abas de edição do seu editor de programas, acesse o diretório tar5 e COPIE seu diretório 'frame' para um diretório nomeado 'divs'. A seguir acesse diretório DIVS. Neste diretório deve ser implementado um sistema de páginas que funcione igualmente como o site montado no diretório porém com o uso de
. 12. Edite o arquivo: entrada.html. Implemente uma estrutura de quadros utilizando a TAG
. As dimensões e comportamentos das DIVs está apresentado no item 4 desta tarefa. 13. Terminado a estruração dos quadros... - TESTE SEUS ARQUIVOS ACESSANDO O SISTEMA POR div.HTML - Acesse seu navegador. Coloque o cursor no campo de endereços e digite: http://localhost/CaminhoDoSeuDiretórioHTML-CSS/tar5/div/div.html (o arquivo que será acessado é o div.html) - Se necessário, altere seu arquivo e recarregue seu arquivo no navegador. 14. ENVIO DO ARQUIVO DA TAREFA Gere um arquivo compactado do DIRETÓRIO tar5. O NOME do arquivo gerado deve ser tar5.zip,ou tar5.RAR ou outro tar5.*. TROQUE o NOME Principal do Arquivo Compactado para SiglaDoSeuNome.* (.zip, .rar, ou outro). A SiglaDoSeuNome deve ser formada com LETRAS MAIÚSCULAS. Por exemplo, se o nome do aluno for Antonio da Silva a sigla deve ser: ADS (o 'D' deve aparecer na Sigla). O arquivo compactado deve ser enviado para a conta de e-mail: prof.joao.hypolito@gmail.com No ASSUNTO da mensagem deve ser escrito: PARA A TURMA DA TARDE ==> ILP540T-Projeto 1, Tarefa 5 PARA A TURMA DA NOITE ==> ILP540N-Projeto 1, Tarefa 5 No CORPO da Mensagem Escreva seu Nome completo. 15. Data e Horário Limite para envio: 12/04/2026 - 23:59 =================================================================================================== ** O estudo das TAGs HTML e seletores CSS pode ser iniciado no site: https://www.w3schools.com/html/default.asp ** Endereço do Site com especificação UNICODE para caracteres especiais e acentuações da língua portuguesa. https://www.fatecourinhos.edu.br/disciplinas/ilp540/tutorial/dicas/dicas2/simbolos.php ** Especificação do que montar na página está no site: https://www.fatecourinhos.edu.br/disciplinas/ilp540/ilp540.php Tarefas|Projetos >> Projeto-01 >> O estudo das TAGs HTML e seletores CSS pode ser iniciado no site: https://www.w3schools.com/html/default.asp