Projeto 1: HTML+CSS - Desenvolvimento da 4ª tarefa
---------------------------------------------------------------------------------------------------
Documento revisado em: 2025-03-27 - 14:00
---------------------------------------------------------------------------------------------------
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 tar4 [novo].
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 e tar3.css para tar4.css.
5. Edite todos os seus arquivos .HTML:
- A cor de fundo de todas as páginas deste site deve ser 'linen' [#FAF0E6].
- 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% d largura da tela.
Esta tabela deve ter 2 linhas.
Na primeira linha mostre o Título "Tarefa 4" e abaixo (na mesma célula) um traço horizontal
ocupando toda largura da tabela.
Na segunda linha devem ser exibidos os acessos para os arquivos do site. Cada acesso deve
ocupar uma célula da linha, portanto esta linha deve ter 6 céluas.
- Em todos os outros arquivos .html o conteúdo deve ser apresentado em uma tabela
centralizada e ocupando 80% da largura da tela. A primeira linha deve mostrar um titulo
com as palavvras "Tarefa 4 - " seguida do termo que apresenta o conteúdo da página
["Identificação", "Habilidades e Caracrísticas", "Defeitos e Manias", etc.].
As linhas seguintes devem ter 2 colunas, a primeira coluna (esquerda) deve apresentar o termo
em fonte courier new e seguido de '.:', a segunda coluna apresenta a descrição do termo
apresentado na primeira coluna.
A quantidade de '.' nos termos da esquerda deve ser tal que todos os ':' fiquem alinhados.
A divisão da primeira para a segunda coluna deve ficar 'encostada' no sinal ':'.
- O fonte a ser usado na segunda coluna (descrição do termo) deve ser TAHOMA, com tamanho 16px.
- 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).
- 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.
- Na página de ANCORAS (montada no arquivo ancora.html) todo o conteúdo da página deve ser
apresentado em uma tabela com largura de 80% e centralizada.
A lista de âncoras deve estar contida em uma tabela com uma linha e cada âncora contida em
uma célula da tabela. 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:
- corpo da página em cor 'LINEN' com texto na cor preta.
- borda de 1 pixel, colapsada envolvendo a linha, cor preto 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.
- botão de voltar com fundo transparente e sem borda.
- 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.
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 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/