Projeto 1: HTML+CSS - Desenvolvimento da Quarta Tarefa ----------------------------------------------------------------------------------------------------------------------------------------------------- 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. 2. No diretório localhost/SeuNomeCompleto/HTML-CSS/ COPIE o diretório tar3 para um novo com nome tar4. tar4 fica 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. No arquivo tar3.html os acessos da lista não ordenada devem ser apresentados em uma tabela com uma linha, ocupando 100% da largura da tela. Esta tabela deve ser exibida SEM bordas visíveis. A formatação dos textos dos acessos devem ser especificados no arquivo tarefa3.css; além dos acessos, implemente uma célula da tabela no fim da linha para receber um botão que mostre o texto 'Voltar' e execute a função history.go(-1). Este botão deve ter sua especificação de exibição definida no arquivo tarefa3.css, sendo transparente e sem borda visivel. A lista não ordenada deve ser desmontada da página. Na apresentação da tabela, os itens de acesso devem ser separados com o sinal '|'. Antes e depois de cada '|' devem ser vistos TRÊS espaços em branco. Estes espaços em branco podem ser implementados com a codificação UNICODE. PESQUISE como fazer isso. Estruture os conteúdos de todos os outros arquivos (exceto o ANCORA.HTML) usando tabelas, seguindo as normas: - As tabelas devem ter TRÊS colunas de largura e a altura equivalente aos itens mostrados na página (com o Título). - O Título da página deve aparecer na 1ª linha com a primeira célula ocupando a largura de 3 células. Use a formatação de título especificada em tarefa3.css. - Considere, em cada linha, a palavra (ou termo) escrito ANTES dos sinal ':' localizado na primeira coluna de cada linha (célula da esquerda na linha). O conteúdo desta célula deve ser escrito em font 'COURIER NEW', com tamanho de 14 pixels na cor preto. A largura da coluna da esquerda deve ser a largura do maior texto dos itens apresentados. Os outros conteúdos devem ser preenchidos com '.' até a largura do maior texto escrito nas células das linhas das tabelas. - Considere, em cada linha, o sinal ':' escrito na segunda coluna da linha (somente este caractere). - Considere, em cada linha, todo o texto à direita de ':' escrito na terceira coluna da linha. Este conteúdo deve usar a formatação de texto (especificado em tarefa3.css). - Em todas as páginas deve ser incluída um linha no final da tabela com a especificação de um botão 'Voltar' apresentando o botão na terceira célula da linha. Nesta linha as duas primeiras células devem estar SEM CONTEÚDO. 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 tarefa3.html. Na página de ANCORAS (montada no arquivo ancora.html) deve ser implementada uma tabala na linha que apresenta os acessos internos da página. Cada acesso deve aparecer em uma célula da tabela e na última célula (extremo direito) deve ser implentada a construção de um botão voltar executando a função history.go(-1). 6. Edite seu arquivo .CSS e especifique seletores e declarações (atributos e valores) que desenhem uma tabela: - borda de 1 pixel, colapsada envolvendo a linha da tabela, na cor preto para as tabelas das páginas. - linha de cabeçalho com cor de fundo em azul claro e letras em vermelho com efeito de negrito, tamanho de 16 pixels com fonte 'ARIAL'. (Em TODAS as páginas acessadas partindo do tarefa3.html) 7. TESTE SEU ARQUIVO - Acesse seu navegador. Coloque o cursor no campo de endereços e digite: http://localhost/SeuNome/HTML-CSS/tar4/tar4.html (o arquivo que será acessado é o tar4.html) - Se necessário, altere seu arquivo e recarregue seu arquivo no navegador. 8. 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/ .---------------------------------------------------------------------------------------------------------------------------------------------------- Documento revisado em: 2024-09-20 - 11:42