Neste projeto de introdução ao HTML, vamos criar uma tabela com a pauta da turma. Nessa pauta vamos inserir uma fotografia pequena de cada aluno que deve ter uma hiperligação para uma fotografia de dimensões maiores. As fotografias devem ser preferencialmente as caricaturas que elaborámos na PT03.
1. Uma tabela base (elemento <table>) onde vai ser inserido todo o texto e todas as fotografias (uma por aluno).
Possíveis formatações da tabela:
2. As fotografias de cada aluno (elemento <img>) em formato grande (900 x 1200 pixel) e pequeno (75 x 100 pixel).
Utiliza as seguintes imagens caricaturadas criadas no "PT03 - Caricatura do Eu":
3. Por baixo de cada fotografia deve aparecer uma legenda com a turma, número e nome do aluno.
4. As cores de cada legenda devem ser diferentes e ao seu gosto.
A formatação deve respeitar as regras do CSS e podem ser inseridas inline ou em ficheiro separado.
Ver como codificar as cores em HTML (CSS): sites.google.com/a/aebenfica.org/apontamentos-tic/programacao/cores
5. Criação de uma hiperligação (elemento <a href= ...>) na fotografia pequena para permitir a visualização de uma versão maior (máximo 1200 pixel na dimensão maior) da mesma fotografia do aluno, que deve abrir em página separada (target="_blank") : <a href="URL" target="_blank"> Texto </a>
6. Respeitar a estrutura de pastas do projeto.
Ver apontamento mais abaixo em "Estrutura de pastas".
7. Verificar o funcionamento do site em modo offline, ou seja a partir do computador utilizando um navegador de Internet ao seu gosto.
Quando estiver tudo a funcionar bem, deve enviar o projeto para o seu repositório github.
Dentro da pasta PTnn deve criar a seguinte "estrutura de sub-pastas":
PTnn
\imagens\ > Inserir todas as imagens no formato jpg *
\css\ > estilos.css ou vazio (ver ponto 4, mais acima)
\scripts\ > (vazio)
\ index.html (o ficheiro index.html deve ser criado diretamente na pasta PTnn)
* para cada aluno deve haver 2 fotografias, uma grande e uma pequena. Ver ponto 6 das Boas praticas)
No GitHub as pastas vazias não são carregadas, assim, para resolveres esse problema, deves criar um ficheiro dummy com o nome readme.txt (vazio) antes de carregares (upload) as pastas.
Não te esqueças de respeitar as boas práticas, nomeadamente no que diz respeito ao nome dos ficheiros: sem maiúsculas, sem acentos e sem espaços.
Tabelas: sites.aebenfica.org/apontamentos-tic/programacao/tabelas
Imagens: sites.aebenfica.org/apontamentos-tic/programacao/img
Boas práticas: sites.aebenfica.org/apontamentos-tic/programacao/boas-praticas
Tudo sobre HTML CSS: www.w3schools.com/html/html_css.asp
Tudo sobre tabelas em HTML: www.w3schools.com/html/html_tables.asp
Tudo sobre formatação de tabelas: www.w3schools.com/css/css_table.asp