Projeto 1: HTML+CSS - Desenvolvimento da Terceira 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 tar2 para um novo com nome tar3. tar3 fica ao lado dos diretórios tar1 e tar2.

 3. Acesse o diretório tar3.

 4. Troque os nomes dos arquivos tarefa2.html para tarefa3.html e tar2.css para tarefa3.css.

 5. Edite todos os seus arquivos .HTML:
    - Em todos os arquivos.HTML devem ser exibido o Nome da tarefa como "Tarefa 3" e a seguir uma linha horizontal com
      1 pixel de espessura ocupando 100% da tela.

    - No arquivo tarefa3.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/tar3/tar3.html (o arquivo que será acessado é o tarefa3.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