Projeto 1: HTML+CSS - Desenvolvimento da Segunda tarefa
-----------------------------------------------------------------------------------------------------------------------------------------------------
1. ATIVE O SERVIDOR DE PÁGINA (abra o painel de controle do XAMPP e 'dispare' o Apache e o MySQL)
2. ACESSE o diretório localhost/SeuNomeCompleto/HTML-CSS
3. CRIE um diretório com nome tar2 (deve ficar ao lado do tar1)
4. Copie o arquivo desenvolvido na Tarefa 1 para o diretório tar2.
5. Acesse o diretório tar2 (aqui começa o desenvolvimento da tarefa 2).
6. Troque o nome do arquivo tarefa1.html para tarefa2.html
CADA UM dos itens criados na lista não ordenada (na Tarefa 1) deve ser o conteúdo de uma nova página
(formatada nos arquivos indicados nos slides de aula).
7. Crie 5 arquivos em formato .TXT com seguintes nomes:
- identificacao.html - deverá ter o conteúdo do item: "Identificação Pessoal"
- habilidcaract.html - deverá ter o conteúdo do item: "Habilidades & Características"
- defeitomanias.html - deverá ter o conteúdo do item: "Defeitos & manias"
- hobbieselazer.html - deverá ter o conteúdo do item: "Hábitos de Lazer"
- horizonfuturo.html - deverá ter o conteúdo do item: "Futuro"
- acessosancora.html - deverá ter o conteúdo de um texto estruturado com, pelo menos, 5 acessos internos (âncoras).
Os conteúdos destes itens estão escritos no arquivo tarefa2.html (exceto o ancora.html).
CADA UM dos itens criados na lista não ordenada (que estão no arquivo tarefa2.html) deve ser o conteúdo de uma nova página.
8. Edite todos os arquivos criados no diretório tar2 (use um editor com ABAS internas - uma para cada arquivo).
9. Copie os comandos do arquivo tarefa2.html para os arquivos novos.
10. Edite cada novo arquivo e exclua os itens que não são do arquivo editado.
Dentro do Identifica.html deve ficar a lista não ordenada somente com o item identificação.
Desse modo em diante para cada novo arquivo gerado.
11. Na edição de cada novo Item edite o título da página.
12. EDITE seu arquivo tarefa2.html e, mantendo a estrutura de lista não ordenada,
transforme os títulos dos itens em acessos para os arquivos (.HTML) que foram criados.
13. Crie um arquivo .CSS com seletores ou identificados ou classes para formatar os elementos:
- TEXTOS: fonte TAHOMA, preto, tam. 12px. (Devem ser utilizados em texto de modo geral)
- ACESSOS: fonte TAHOMA, azul, tam. 14px. (Devem ser usados em TAGS ...
- TÍTULOS: fonte Arial, vermelho, tam. 16px. (Devem ser utilizados em Títulos dos itens)
Estes seletores devem referenciados em cada um dos arquivos criados no diretório tar2.
14. Em CADA arquivo com os conteúdos específicos você deve implementar um acesso para retorno para a página anterior. Este acesso DEVE estar disponível
com as palavras "Voltar uma página" ou usando os ícones gráficos para os códigos hexadecimais disponíveis para a HTML.
(Consulte https://www.mclibre.org/consultar/htmlcss/html/html-unicode-simbolos.html ).
Este acesso DEVE USAR a função history.go() disponível nos navegadores. PESQUISE e estude como usar esta função.
15. No arquivo ancora.html o conteúdo desenvolvido deve ser um texto com pelo menos 2 telas de rolagem no navegador em modo tela cheia.
Este texto deve ter uma linha com pelo menos 5 âncoras especificadas no topo da primeira tela da página montada.
No lado DIREITO da linha de espeficação das âncoras, desenvolva um botão com o texto 'Voltar' e com a execução da função 'history.go(-1)'
ao clicar do mouse sobre o botão. Ao lado de cada âncora montada deve ser exibido um botão 'Voltar'.
16. Seu diretório TAR2 (tarefa 2 - desenvolvimento de páginas de acesso.) deve ficar com 7 arquivos .html e um arquivo .CSS. No site, os Slides de
Anotações de Aula >> HTML-CSS >> Links de Navegação são sitados os nomes:
- tarefa2.html | identifica.html | habilcarac.html | defeitomania.html | hobbies.html | futuro.html e ancora.html.
ENTRETANTO, considere os NOMES de ARQUIVOS indicados NESSE TEXTO. Além destes arquivos .html, deve ser feito o arquivo com nome tarefa2.css.
17. SEMPRE TESTE SEU sistema à partir do arquivo tarefa2.html
- Acesse seu navegador. Coloque o cursor no campo de endereços e digite:
http://localhost/SeuNomeCompleto/HTML-CSS/tar2/tarefa2.html (o arquivo que será acessado é o tarefa2.html)
- Se necessário, altere seu arquivo e recarregue seu arquivo no navegador.
18. Gere um arquivo compactado do diretório onde foram criados os dois diretórios TAR1 e TAR2.
** 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