Projeto 1: HTML+CSS - Desenvolvimento da 4ª tarefa --------------------------------------------------------------------------------------------------- Documento revisado em: 2025-09-10 - 19:30 --------------------------------------------------------------------------------------------------- 1. ATIVE O SERVIDOR DE PÁGINA (abra o painel de controle do XAMPP e 'dispare' o Apache e o MySQL) Deu pra ver que está sempre será a primeira instrução na execução de uma tarefa. Mas mesmo assim escreverei em todas. Para edição de suas tarefas use [preferencialmente] um editor com multiplas abas. 2. No diretório localhost/SeuNomeCompleto/HTML-CSS/ COPIE o diretório tar3 para o diretório tar4 [novo]. O diretório tar4 deve estar 'ao lado' dos diretórios tar1, tar2 e tar3. 3. Acesse o diretório tar4. 4. Troque os nomes dos arquivos tar3.html para tar4.html. 5. Crie um arquivo (formato texto UTF8) com nome tar4.css. No arquivo tar4.css devem ser escritos seletores nomeados, classes ou identificadores CSS para a seguinte especificação: - A cor de fundo de todas as páginas deste site deve ser 'linen' [#FAF0E6]. - A cor da fonte dos títulos das páginas deve se manter em vermelho, com fonte ARIAL tamanho 16 pixels. - Todas as tabelas devem apresentar uma borda de 1 pixel sem a exibição de francos (colapsada), cor preto. - O texto dos itens da primeira coluna das tabelas das páginas acessadas de tar4.html devem ter como fonte o "Courier New" (monoespaçado) de cor preto e com tamanho 12 pixels, esta formatação deve constar no arquivo tar4.css - O sinal de ':' deve ser incorporado na primeira coluna de cada tabela das páginas acessadas de tar4.html. - A segunda coluna da tabela montada em cada página acessada de tar4.html deve ter como fonte o 'TAHOMA' com tamanho 12 pixels em cor preto. Esta formatação deve constar no arquivo tar4.css 6. Edite todos os arquivos .HTML usando algum editor de programação. - Todos os arquivos do site devem estabelecer uma hiperligação [link] com o arquivo tar4.css no bloco ... do arquivo .html. - No Arquivo tar4.html os itens de acessos para os outros arquivos devem ser apresentados em uma tabela que deve estar centralizada e ocupando 80% da largura da tela. Esta tabela deve ter 1 linha com 8 células. A primeira coluna deve mostrar um titulo com as palavras "Tarefa 4 - " seguida do termo que apresenta o conteúdo da página ["Identificação", "Habilidades e Caracrísticas", "Defeitos e Manias", etc.]. - Na primeira célula deve estar escrito 'Tarefa 4'. Na última célula (direita) deve apresentar um botão 'Sair' implentando o HISTORY.GO(-1). - Em todos os outros arquivos .html o conteúdo deve ser apresentado em uma tabela centralizada. A largura da tabela deve ser proporcional ao conteúdo das linhas da tabela, EXCETO nas tabelas da página formada por tar4.html e ancoras.html - A última linha das tabelas montadas em todas as páginas (exceto a montada no arquivo tar4.html) deve conter a TAG que monta o botão 'voltar' e este botão deve ser colocada na segunda coluna da linha (direita). 7. Na página formada pelo arquivo de ANCORAS.HTML o conteúdo deve ser estruturado dentro de uma tabela centralizada ocupando 80% da largura da tela. A lista de acessos deve ser posicionada na primeira linha da tabela. Na segunda linha deve ser desenhado uma linha horizontal ocupando toda a largura da tabela. Cada âncora e seu respectivo conteúdo deve ser posicionado em uma linha da tabela. A largura desta coluna deve abranger a quantidade de acessos dos índices de âncora menos uma coluna. Na coluna da direita da tabela dos conteúdos de âncoras deve ser posicionado o botão de 'voltar' implementando a função HISTORY.GO(-1), alimhado na vertical no topo da célula. O botão 'voltar' deve ter fundo transparente e sem borda; o texto deve ter cor preto. 8. TODAS as Tabelas implementadas no sistema devem apresentar uma borda em cor preto, com 1 pixel de espessura e colapsada (sem efeito 3D). EXCETO a tabela construída no arquivo tar4.html. Não use o atributo STYLE='' para definir o comportamento das bordas. 9. Edite seu arquivo .CSS e especifique seletores e declarações (atributos e valores) que desenhem uma tabela: - corpo da página em cor 'LINEN' com texto na cor preta. - borda de 1 pixel, colapsada envolvendo a linha para as tabelas das páginas. - linha de cabeçalho com cor de fundo LightBlue [#ADD8E6] e letras em vermelho com efeito de negrito, tamanho de 16 pixels com fonte 'ARIAL'. (Em TODAS as páginas acessadas partindo do tar4.html) - txtitem - fonte do item apresentado nas tabelas das páginas referenciadas em tar4.html COURIER NEW, sem serifa, cor preta, tamanho de 12pixels. - txtdesc - fonte da descrição de cada item das tabelas das páginas referenciadas em tar4.html. TAHOMA, sem serifa, cor preta, tamanho de 12pixels. - textos em geral com fonte COURIER NEW, sem serifa, tamanho de 14pixels, cor preta. - titulos em geral com fonte ARIAL, sem serifa, tamanho de 16pixels, cor vermelha. 10. TESTE SEU ARQUIVO - Acesse seu navegador. Coloque o cursor no campo de endereços e digite: http://localhost/SeuNome/HTML-CSS/tar3/tar3.html (o arquivo que será acessado é o tar4.html) - Se necessário, altere seu arquivo e recarregue seu arquivo no navegador. 11. Gere um arquivo compactado do diretório SeuNomeCompleto onde existe o diretório HTML-CSS e onde foram criados os três diretórios (tar1, tar2 e tar3) ** Especificação do que montar na página está no site: https://www.fatecourinhos.edu.br/disciplinas/ilp540/ilp540.php 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/